{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sparkles",
  "title": "Sparkles",
  "description": "Decorative twinkling sparkles scattered behind content.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/sparkles/sparkles.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link Sparkles}. */\nexport type SparklesProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Count of twinkling sparkle squares to scatter. Defaults to `20`. */\n  count?: number;\n};\n\ntype Sparkle = {\n  delay: number;\n  duration: number;\n  left: number;\n  size: number;\n  top: number;\n};\n\nfunction createSparkles(count: number): Sparkle[] {\n  return Array.from({ length: count }, () => ({\n    delay: Math.random() * 2,\n    duration: 1 + Math.random() * 1.5,\n    left: Math.random() * 100,\n    size: 4 + Math.random() * 8,\n    top: Math.random() * 100,\n  }));\n}\n\n/**\n * Decorative field of twinkling sparkles layered behind optional content.\n *\n * Respects `prefers-reduced-motion`: the sparkles hold still.\n *\n * @example\n * ```tsx\n * <Sparkles count={30}>\n *   <h1>Magic</h1>\n * </Sparkles>\n * ```\n */\nexport const Sparkles = ({\n  children,\n  className,\n  count = 20,\n  ref,\n  ...props\n}: SparklesProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [sparkles] = React.useState(() => createSparkles(count));\n\n  return (\n    <div className={cn(\"relative\", className)} ref={ref} {...props}>\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 overflow-hidden\"\n      >\n        {sparkles.map((sparkle, index) => (\n          <span\n            className=\"absolute rotate-45 rounded-[1px] bg-foreground motion-reduce:animate-none\"\n            key={index}\n            style={{\n              animation: `vllnt-sparkle ${sparkle.duration}s linear infinite`,\n              animationDelay: `${sparkle.delay}s`,\n              height: `${sparkle.size}px`,\n              left: `${sparkle.left}%`,\n              top: `${sparkle.top}%`,\n              width: `${sparkle.size}px`,\n            }}\n          />\n        ))}\n      </div>\n      {children ? <div className=\"relative\">{children}</div> : null}\n    </div>\n  );\n};\nSparkles.displayName = \"Sparkles\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}