{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-video-player-demo",
  "type": "registry:component",
  "registryDependencies": [
    "hover-video-player"
  ],
  "files": [
    {
      "path": "registry/default/example/hover-video-player-demo.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { GradientHeading } from \"../ui/gradient-heading\"\nimport { HoverVideoPlayer } from \"../ui/hover-video-player\"\n\nexport default function HoverVideoPlayerDemo() {\n  const shouldReduceMotion = useReducedMotion()\n\n  return (\n    <div className=\"flex h-full w-full flex-col items-center justify-center gap-12 py-12\">\n      <div className=\"text-center\">\n        <GradientHeading>Hover video player</GradientHeading>\n      </div>\n      <motion.div\n        animate={shouldReduceMotion ? \"expanded\" : \"collapsed\"}\n        className=\"flex aspect-video w-full max-w-4xl items-center justify-center\"\n        initial={false}\n        whileHover={shouldReduceMotion ? undefined : \"expanded\"}\n      >\n        <motion.div\n          variants={{\n            collapsed: { width: \"50%\" },\n            expanded: { width: \"100%\" },\n          }}\n          transition={{\n            type: \"spring\",\n            duration: 0.42,\n            bounce: 0,\n          }}\n          className={cn(\n            \"group relative flex transform-gpu flex-col overflow-hidden rounded-lg\",\n            \"bg-white shadow-sm ring-1 ring-black/5\",\n            \"data-dark:bg-stone-800 data-dark:ring-white/15\"\n          )}\n        >\n          <HoverVideoPlayer\n            videoSrc=\"https://player.vimeo.com/video/1037289858\"\n            thumbnailSrc=\"/placeholders/newcopy-thumbnail.png\"\n            enableControls\n            style={{\n              width: \"100%\",\n              maxWidth: \"100vw\",\n              aspectRatio: \"16/9\",\n            }}\n          />\n        </motion.div>\n      </motion.div>\n\n      <a href=\"https://www.newcult.co\" target=\"_blank\" rel=\"noreferrer\">\n        newcopy.ai\n      </a>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}