{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meteors",
  "title": "Meteors",
  "description": "Decorative meteor shower of streaks falling across the background.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/meteors/meteors.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Props for {@link Meteors}. */\nexport type MeteorsProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Count of meteors streaking across the field. Defaults to `12`. */\n  count?: number;\n};\n\ntype Meteor = {\n  delay: number;\n  duration: number;\n  left: number;\n  top: number;\n};\n\nfunction createMeteors(count: number): Meteor[] {\n  return Array.from({ length: count }, () => ({\n    delay: Math.random(),\n    duration: 2 + Math.random() * 4,\n    left: Math.random() * 100,\n    top: -(Math.random() * 10),\n  }));\n}\n\ntype MeteorStyle = React.CSSProperties & {\n  \"--vllnt-meteor-angle\"?: string;\n};\n\nfunction meteorStyle(meteor: Meteor): MeteorStyle {\n  return {\n    \"--vllnt-meteor-angle\": \"215deg\",\n    animation: `vllnt-meteor ${meteor.duration}s linear infinite`,\n    animationDelay: `${meteor.delay}s`,\n    left: `${meteor.left}%`,\n    top: `${meteor.top}%`,\n  };\n}\n\n/**\n * Decorative shower of meteors falling diagonally across the field.\n *\n * Respects `prefers-reduced-motion`: the meteors stay parked.\n *\n * @example\n * ```tsx\n * <Meteors count={20} />\n * ```\n */\nexport const Meteors = ({\n  className,\n  count = 12,\n  ref,\n  ...props\n}: MeteorsProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [meteors] = React.useState(() => createMeteors(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      {meteors.map((meteor, index) => (\n        <span\n          className=\"absolute h-0.5 w-0.5 rounded-full bg-muted-foreground motion-reduce:animate-none\"\n          key={index}\n          style={meteorStyle(meteor)}\n        >\n          <span\n            className=\"absolute right-0 top-1/2 h-px w-12 -translate-y-1/2\"\n            style={{\n              background:\n                \"linear-gradient(90deg, oklch(var(--muted-foreground)), transparent)\",\n            }}\n          />\n        </span>\n      ))}\n    </div>\n  );\n};\nMeteors.displayName = \"Meteors\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}