{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sparkles-text",
  "type": "registry:component",
  "title": "Sparkles text",
  "description": "Headline text with four point stars that twinkle around it in your accent colors. The sparkles are decorative and hidden; the text stays plain and readable.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/sparkles-text.tsx",
      "type": "registry:ui",
      "target": "components/ui/sparkles-text.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Text with small four point stars that twinkle around it, placed at\n * random and replaced as they fade. The stars are decorative and hidden\n * from assistive tech; the text stays a normal text node.\n */\ntype SparklesTextProps = {\n  children?: React.ReactNode\n  /** How many stars are alive at once. */\n  count?: number\n  className?: string\n}\n\ntype Star = { id: number; x: number; y: number; size: number; delay: number; color: string }\n\nfunction SparklesText({ children = \"Magic, but tasteful\", count = 8, className }: SparklesTextProps) {\n  const reduce = useReducedMotion()\n  const [stars, setStars] = React.useState<Star[]>([])\n  const n = React.useRef(0)\n  React.useEffect(() => {\n    if (reduce) return\n    const make = (): Star => ({ id: n.current++, x: Math.random() * 100, y: Math.random() * 100, size: 8 + Math.random() * 10, delay: Math.random() * 0.6, color: Math.random() > 0.5 ? \"var(--accent)\" : \"var(--accent-2)\" })\n    setStars(Array.from({ length: count }, make))\n    const id = window.setInterval(() => setStars((s) => [...s.slice(1), make()]), 420)\n    return () => window.clearInterval(id)\n  }, [count, reduce])\n  return (\n    <span data-slot=\"sparkles-text\" className={cn(\"relative inline-block text-4xl font-semibold tracking-[-0.045em] text-fg sm:text-5xl\", className)}>\n      {stars.map((s) => (\n        <svg\n          key={s.id}\n          aria-hidden\n          viewBox=\"0 0 24 24\"\n          className=\"pointer-events-none absolute\"\n          style={{ left: `${s.x}%`, top: `${s.y}%`, width: s.size, height: s.size, color: s.color, animation: `sparkle 1.4s ease-in-out ${s.delay}s both` }}\n        >\n          <path d=\"M12 0c.6 5.6 6.4 11.4 12 12-5.6.6-11.4 6.4-12 12-.6-5.6-6.4-11.4-12-12C5.6 11.4 11.4 5.6 12 0Z\" fill=\"currentColor\" />\n        </svg>\n      ))}\n      <span className=\"relative\">{children}</span>\n      <style>{`@keyframes sparkle{0%,100%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}50%{transform:translate(-50%,-50%) scale(1) rotate(90deg);opacity:1}}`}</style>\n    </span>\n  )\n}\n\nexport { SparklesText }\nexport type { SparklesTextProps }\n"
    }
  ]
}