{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["motion"],"description":"Spotlight hero block with dark theme and gradient text","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport SmoothButton from \"@/components/smoothui/smooth-button\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nconst SPRING = {\n  bounce: 0.1,\n  duration: 0.25,\n  type: \"spring\" as const,\n};\n\nexport function HeroSpotlight() {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <section aria-labelledby=\"hero-spotlight-heading\">\n      <div className=\"relative flex min-h-[600px] items-center justify-center overflow-hidden bg-zinc-950 py-24 md:py-32\">\n        {/* Spotlight beam */}\n        <motion.div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute top-0 left-1/2 h-full w-[600px] -translate-x-1/2\"\n          initial={\n            shouldReduceMotion ? { opacity: 0.15 } : { opacity: 0, scaleX: 0 }\n          }\n          style={{\n            background:\n              \"conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(120, 119, 198, 0.12) 50%, transparent 60%)\",\n          }}\n          transition={\n            shouldReduceMotion\n              ? { duration: 0 }\n              : { duration: 0.8, ease: [0.23, 1, 0.32, 1] }\n          }\n          viewport={{ once: true }}\n          whileInView={\n            shouldReduceMotion\n              ? { opacity: 0.15 }\n              : { opacity: 0.15, scaleX: 1 }\n          }\n        />\n\n        {/* Floating particles */}\n        <div\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0\"\n        >\n          {Array.from({ length: 20 }, (_, i) => (\n            <div\n              className=\"absolute h-1 w-1 rounded-full bg-white/20\"\n              key={`particle-${i}`}\n              style={{\n                animation: `pulse ${2 + (i % 3)}s ease-in-out infinite ${(i % 5) * 0.5}s`,\n                left: `${(i * 37 + 13) % 100}%`,\n                top: `${(i * 53 + 7) % 100}%`,\n              }}\n            />\n          ))}\n        </div>\n\n        <div className=\"relative z-10 mx-auto max-w-4xl px-6 text-center\">\n          <motion.div\n            initial={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 24 }\n            }\n            transition={\n              shouldReduceMotion\n                ? { duration: 0 }\n                : { ...SPRING, staggerChildren: 0.08 }\n            }\n            viewport={{ once: true }}\n            whileInView={\n              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }\n            }\n          >\n            <h1\n              className=\"bg-gradient-to-b from-white to-zinc-400 bg-clip-text font-bold text-4xl text-transparent tracking-tight md:text-6xl lg:text-7xl\"\n              id=\"hero-spotlight-heading\"\n            >\n              Build stunning interfaces\n            </h1>\n            <p className=\"mx-auto mt-6 max-w-xl text-lg text-zinc-400\">\n              Beautifully animated components built with React, Motion, and\n              Tailwind CSS. Open source and ready for production.\n            </p>\n            <div className=\"mt-10 flex flex-wrap items-center justify-center gap-4\">\n              <SmoothButton\n                className=\"bg-white text-zinc-900 hover:bg-zinc-200\"\n                size=\"lg\"\n              >\n                Get Started\n              </SmoothButton>\n              <SmoothButton\n                className=\"border-zinc-700 bg-transparent text-zinc-300 hover:bg-zinc-800\"\n                size=\"lg\"\n                variant=\"outline\"\n              >\n                Documentation\n              </SmoothButton>\n            </div>\n          </motion.div>\n        </div>\n\n        <style>{`\n          @keyframes pulse {\n            0%, 100% { opacity: 0.2; }\n            50% { opacity: 0.8; }\n          }\n        `}</style>\n      </div>\n    </section>\n  );\n}\n\nexport default HeroSpotlight;\n","path":"index.tsx","target":"components/smoothui/header-5/index.tsx","type":"registry:block"}],"name":"header-5","registryDependencies":["https://smoothui.dev/r/smooth-button.json"],"title":"Header 5","type":"registry:block"}