{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "particles",
  "title": "Particles",
  "description": "Floating particle field that drifts gently in the background.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/particles/particles.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link Particles}. */\nexport type ParticlesProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Count of drifting dots in the field. Defaults to `30`. */\n  count?: number;\n};\n\ntype Particle = {\n  delay: number;\n  duration: number;\n  left: number;\n  size: number;\n  top: number;\n};\n\nfunction createParticles(count: number): Particle[] {\n  return Array.from({ length: count }, () => ({\n    delay: Math.random() * 4,\n    duration: 4 + Math.random() * 6,\n    left: Math.random() * 100,\n    size: 2 + Math.random() * 3,\n    top: Math.random() * 100,\n  }));\n}\n\n/**\n * Decorative field of dots drifting upward at staggered speeds.\n *\n * Respects `prefers-reduced-motion`: the dots hold still.\n *\n * @example\n * ```tsx\n * <Particles count={40} />\n * ```\n */\nexport const Particles = ({\n  className,\n  count = 30,\n  ref,\n  ...props\n}: ParticlesProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [particles] = React.useState(() => createParticles(count));\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {particles.map((particle, index) => (\n        <span\n          className=\"absolute rounded-full bg-foreground/30 motion-reduce:animate-none\"\n          key={index}\n          style={{\n            animation: `vllnt-particle-float ${particle.duration}s linear infinite`,\n            animationDelay: `${particle.delay}s`,\n            height: `${particle.size}px`,\n            left: `${particle.left}%`,\n            top: `${particle.top}%`,\n            width: `${particle.size}px`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\nParticles.displayName = \"Particles\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}