{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-video-dialog",
  "type": "registry:ui",
  "title": "Hero Video Dialog",
  "description": "A hero video dialog component.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/hero-video-dialog.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Play, XIcon } from \"lucide-react\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype AnimationStyle =\n  | \"from-bottom\"\n  | \"from-center\"\n  | \"from-top\"\n  | \"from-left\"\n  | \"from-right\"\n  | \"fade\"\n  | \"top-in-bottom-out\"\n  | \"left-in-right-out\"\n\ninterface HeroVideoProps {\n  animationStyle?: AnimationStyle\n  videoSrc: string\n  thumbnailSrc: string\n  thumbnailAlt?: string\n  className?: string\n}\n\nconst animationVariants = {\n  \"from-bottom\": {\n    initial: { y: \"100%\", opacity: 0 },\n    animate: { y: 0, opacity: 1 },\n    exit: { y: \"100%\", opacity: 0 },\n  },\n  \"from-center\": {\n    initial: { scale: 0.5, opacity: 0 },\n    animate: { scale: 1, opacity: 1 },\n    exit: { scale: 0.5, opacity: 0 },\n  },\n  \"from-top\": {\n    initial: { y: \"-100%\", opacity: 0 },\n    animate: { y: 0, opacity: 1 },\n    exit: { y: \"-100%\", opacity: 0 },\n  },\n  \"from-left\": {\n    initial: { x: \"-100%\", opacity: 0 },\n    animate: { x: 0, opacity: 1 },\n    exit: { x: \"-100%\", opacity: 0 },\n  },\n  \"from-right\": {\n    initial: { x: \"100%\", opacity: 0 },\n    animate: { x: 0, opacity: 1 },\n    exit: { x: \"100%\", opacity: 0 },\n  },\n  fade: {\n    initial: { opacity: 0 },\n    animate: { opacity: 1 },\n    exit: { opacity: 0 },\n  },\n  \"top-in-bottom-out\": {\n    initial: { y: \"-100%\", opacity: 0 },\n    animate: { y: 0, opacity: 1 },\n    exit: { y: \"100%\", opacity: 0 },\n  },\n  \"left-in-right-out\": {\n    initial: { x: \"-100%\", opacity: 0 },\n    animate: { x: 0, opacity: 1 },\n    exit: { x: \"100%\", opacity: 0 },\n  },\n}\n\nexport function HeroVideoDialog({\n  animationStyle = \"from-center\",\n  videoSrc,\n  thumbnailSrc,\n  thumbnailAlt = \"Video thumbnail\",\n  className,\n}: HeroVideoProps) {\n  const [isVideoOpen, setIsVideoOpen] = useState(false)\n  const selectedAnimation = animationVariants[animationStyle]\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <button\n        type=\"button\"\n        aria-label=\"Play video\"\n        className=\"group relative cursor-pointer border-0 bg-transparent p-0\"\n        onClick={() => setIsVideoOpen(true)}\n      >\n        <img\n          src={thumbnailSrc}\n          alt={thumbnailAlt}\n          width={1920}\n          height={1080}\n          className=\"w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]\"\n        />\n        <div className=\"absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100\">\n          <div className=\"bg-primary/10 flex size-28 items-center justify-center rounded-full backdrop-blur-md\">\n            <div\n              className={`from-primary/30 to-primary relative flex size-20 scale-100 items-center justify-center rounded-full bg-linear-to-b shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]`}\n            >\n              <Play\n                className=\"size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105\"\n                style={{\n                  filter:\n                    \"drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))\",\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </button>\n      <AnimatePresence>\n        {isVideoOpen && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            role=\"button\"\n            tabIndex={0}\n            onKeyDown={(e) => {\n              if (e.key === \"Escape\" || e.key === \"Enter\" || e.key === \" \") {\n                setIsVideoOpen(false)\n              }\n            }}\n            onClick={() => setIsVideoOpen(false)}\n            exit={{ opacity: 0 }}\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md\"\n          >\n            <motion.div\n              {...selectedAnimation}\n              transition={{ type: \"spring\", damping: 30, stiffness: 300 }}\n              className=\"relative mx-4 aspect-video w-full max-w-4xl md:mx-0\"\n            >\n              <motion.button className=\"absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black\">\n                <XIcon className=\"size-5\" />\n              </motion.button>\n              <div className=\"relative isolate z-1 size-full overflow-hidden rounded-2xl border-2 border-white\">\n                <iframe\n                  src={videoSrc}\n                  title=\"Hero Video player\"\n                  className=\"mt-0 size-full rounded-2xl\"\n                  allowFullScreen\n                  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                ></iframe>\n              </div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}