{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dynamic-spotlight-cta-shadcnui",
  "type": "registry:page",
  "title": "Dynamic Spotlight CTA",
  "description": "Floating spotlight follows cursor to reveal gradient CTA text with premium effects",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/dynamic-spotlight-cta.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { MouseEvent, useMemo, useState } from \"react\";\n\ntype DynamicSpotlightCTAProps = {\n  text?: string;\n  intensity?: number;\n  radius?: number;\n  showBlur?: boolean;\n};\n\ntype Particle = {\n  left: string;\n  top: string;\n  size: number;\n  travel: number;\n  duration: number;\n  delay: number;\n};\n\nexport function DynamicSpotlightCTA({\n  text = \"Unlock Your Motion Power\",\n  intensity = 0.85,\n  radius = 240,\n  showBlur = true,\n}: DynamicSpotlightCTAProps) {\n  const [mousePosition, setMousePosition] = useState<{\n    x: number;\n    y: number;\n  } | null>(null);\n  const shouldReduceMotion = useReducedMotion();\n\n  const particles = useMemo<Particle[]>(\n    () =>\n      Array.from({ length: 18 }).map(() => ({\n        left: `${Math.random() * 100}%`,\n        top: `${Math.random() * 100}%`,\n        size: Math.random() * 4 + 2,\n        travel: Math.random() * 72 - 36,\n        duration: Math.random() * 3 + 2,\n        delay: Math.random() * 2,\n      })),\n    []\n  );\n\n  const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => {\n    if (shouldReduceMotion) return;\n    const rect = event.currentTarget.getBoundingClientRect();\n    const x = event.clientX - rect.left;\n    const y = event.clientY - rect.top;\n    setMousePosition({ x, y });\n  };\n\n  const handleMouseLeave = () => {\n    setMousePosition(null);\n  };\n\n  return (\n    <section\n      aria-labelledby=\"dynamic-spotlight-title\"\n      className=\"relative w-full\"\n    >\n      <div\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        className=\"relative h-[22rem] w-full overflow-hidden rounded-3xl border border-border/60 bg-card/80 shadow-[0_35px_120px_-40px_rgba(15,23,42,0.7)] backdrop-blur-xl\"\n      >\n        <div aria-hidden className=\"pointer-events-none absolute inset-0\">\n          <motion.div\n            className=\"absolute -top-28 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-primary/25 blur-[160px]\"\n            animate={\n              shouldReduceMotion\n                ? undefined\n                : { opacity: [0.25, 0.55, 0.25], scale: [0.92, 1.08, 0.96] }\n            }\n            transition={\n              shouldReduceMotion\n                ? undefined\n                : { duration: 9, repeat: Infinity, ease: \"easeInOut\" }\n            }\n          />\n          <motion.div\n            className=\"absolute bottom-[-30%] right-[-15%] h-80 w-80 rounded-full bg-emerald-400/20 blur-[180px]\"\n            animate={\n              shouldReduceMotion\n                ? undefined\n                : { opacity: [0.2, 0.45, 0.2], rotate: [0, 12, 0] }\n            }\n            transition={\n              shouldReduceMotion\n                ? undefined\n                : { duration: 12, repeat: Infinity, ease: \"linear\" }\n            }\n          />\n          {showBlur && (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-white/4 via-white/2 to-transparent\" />\n          )}\n        </div>\n\n        <div className=\"relative flex h-full flex-col items-center justify-center px-6 text-center\">\n          <motion.span\n            className=\"mb-4 inline-flex items-center gap-2 rounded-full border border-border/60 bg-white/5 px-4 py-2 text-xs uppercase tracking-[0.32em] text-[var(--muted-foreground)] backdrop-blur\"\n            initial={{\n              opacity: shouldReduceMotion ? 1 : 0,\n              y: shouldReduceMotion ? 0 : 12,\n            }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.4, ease: \"easeOut\" }}\n          >\n            Live Spotlight\n            <span className=\"h-1.5 w-1.5 rounded-full bg-primary\" />\n          </motion.span>\n\n          <motion.h1\n            id=\"dynamic-spotlight-title\"\n            initial={{\n              opacity: shouldReduceMotion ? 1 : 0,\n              y: shouldReduceMotion ? 0 : 18,\n            }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, ease: \"easeOut\" }}\n            className=\"max-w-2xl bg-gradient-to-r from-white via-white/90 to-white/70 bg-clip-text text-4xl font-semibold text-foreground sm:text-5xl md:text-6xl\"\n          >\n            {text}\n          </motion.h1>\n          <p className=\"mt-4 max-w-md text-sm text-[var(--muted-foreground)] sm:text-base\">\n            Move your cursor to cast a live glassmorphic spotlight and preview\n            premium motion-ready surfaces.\n          </p>\n        </div>\n\n        <AnimatePresence>\n          {!shouldReduceMotion && mousePosition && (\n            <motion.div\n              key=\"spotlight\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: intensity }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.3 }}\n              className=\"pointer-events-none absolute inset-0 mix-blend-screen\"\n              style={{\n                background: `radial-gradient(circle ${radius}px at ${mousePosition.x}px ${mousePosition.y}px,\n                  rgba(255,255,255,0.45) 0%,\n                  rgba(255,255,255,0.2) 45%,\n                  rgba(255,255,255,0) 75%)`,\n              }}\n            >\n              <motion.div\n                animate={{\n                  background: [\n                    \"radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%)\",\n                    \"radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%)\",\n                    \"radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%)\",\n                  ],\n                }}\n                transition={{\n                  duration: 1.8,\n                  repeat: Infinity,\n                  ease: \"easeInOut\",\n                }}\n                className=\"absolute\"\n                style={{\n                  left: mousePosition.x,\n                  top: mousePosition.y,\n                  width: `${radius * 1.6}px`,\n                  height: `${radius * 1.6}px`,\n                  transform: \"translate(-50%, -50%)\",\n                  filter: \"blur(32px)\",\n                }}\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n          {particles.map((particle, index) => (\n            <motion.span\n              key={index}\n              className=\"absolute rounded-full bg-white/25\"\n              style={{\n                left: particle.left,\n                top: particle.top,\n                width: particle.size,\n                height: particle.size,\n              }}\n              animate={\n                shouldReduceMotion\n                  ? undefined\n                  : {\n                      y: [0, particle.travel, 0],\n                      opacity: [0.1, 0.45, 0.1],\n                    }\n              }\n              transition={\n                shouldReduceMotion\n                  ? { duration: 0 }\n                  : {\n                      duration: particle.duration,\n                      repeat: Infinity,\n                      delay: particle.delay,\n                    }\n              }\n            />\n          ))}\n        </div>\n\n        <div className=\"pointer-events-none absolute inset-0\">\n          <div className=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/50 to-transparent\" />\n          <div className=\"absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent\" />\n          <div className=\"absolute inset-y-0 left-0 w-px bg-gradient-to-b from-transparent via-emerald-300/50 to-transparent\" />\n          <div className=\"absolute inset-y-0 right-0 w-px bg-gradient-to-b from-transparent via-primary/50 to-transparent\" />\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/dynamic-spotlight-cta-shadcnui.tsx"
    }
  ]
}