{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "particles-background",
  "type": "registry:ui",
  "title": "Sky Particles Background",
  "description": "A field of softly twinkling particles, rendered with CSS only.",
  "files": [
    {
      "path": "src/registry/backgrounds/particles-background.tsx",
      "type": "registry:ui",
      "content": "import { cn } from \"@/lib/utils\";\n\nexport type ParticlesBackgroundProps = Omit<React.ComponentProps<\"div\">, \"children\" | \"color\"> & {\n  /** Number of particles (capped at 400). @default 100 */\n  count?: number;\n  /** Any CSS color. Defaults to the current text color (`text-foreground`). */\n  color?: string;\n};\n\nconst KEYFRAMES = `@keyframes devsloka-particles-twinkle{0%,100%{opacity:var(--particle-opacity);transform:scale(1)}50%{opacity:calc(var(--particle-opacity) * 0.25);transform:scale(1.3)}}`;\n\n/** Small deterministic PRNG so server and client render the same scatter. */\nfunction mulberry32(seed: number) {\n  return () => {\n    seed = (seed + 0x6d2b79f5) | 0;\n    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\nconst round = (n: number) => Math.round(n * 100) / 100;\n\nfunction createParticles(count: number) {\n  const random = mulberry32(count);\n  return Array.from({ length: count }, () => ({\n    size: round(1 + random() * 2),\n    x: round(random() * 100),\n    y: round(random() * 100),\n    opacity: round(0.3 + random() * 0.7),\n    duration: round(3 + random() * 7),\n    delay: round(random() * -10),\n  }));\n}\n\n/** Twinkling dots scattered across the parent. Positions are seeded, so they are stable across renders. */\nexport function ParticlesBackground({\n  count = 100,\n  color,\n  className,\n  style,\n  ...props\n}: ParticlesBackgroundProps) {\n  const particles = createParticles(Math.max(0, Math.min(400, Math.floor(count))));\n\n  return (\n    <div\n      aria-hidden\n      data-slot=\"particles-background\"\n      className={cn(\"pointer-events-none absolute inset-0 overflow-hidden text-foreground\", className)}\n      style={color ? { color, ...style } : style}\n      {...props}\n    >\n      <style href=\"devsloka-particles-background\" precedence=\"default\">\n        {KEYFRAMES}\n      </style>\n      {particles.map((p, i) => (\n        <span\n          key={i}\n          className=\"absolute rounded-full bg-current animate-[devsloka-particles-twinkle_5s_ease-in-out_infinite] motion-reduce:animate-none\"\n          style={\n            {\n              width: p.size,\n              height: p.size,\n              left: `${p.x}%`,\n              top: `${p.y}%`,\n              opacity: p.opacity,\n              \"--particle-opacity\": p.opacity,\n              animationDuration: `${p.duration}s`,\n              animationDelay: `${p.delay}s`,\n            } as React.CSSProperties\n          }\n        />\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}