{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meteors",
  "title": "Meteors",
  "description": "Falling meteor streaks for dark hero and CTA sections.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/meteors.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface MeteorsProps {\n  number?: number;\n  className?: string;\n}\n\n/**\n * Falling meteor streaks. Values are derived from the index (not random)\n * so server and client markup always match.\n */\nexport function Meteors({ number = 12, className }: MeteorsProps) {\n  const meteors = Array.from({ length: number }, (_, i) => ({\n    left: `${(i * 37 + 11) % 100}%`,\n    top: `${(i * 17) % 40}%`,\n    delay: `${((i * 53) % 70) / 10}s`,\n    duration: `${4 + ((i * 29) % 35) / 10}s`,\n  }));\n\n  return (\n    <div\n      aria-hidden\n      data-slot=\"meteors\"\n      className=\"pointer-events-none absolute inset-0 overflow-hidden\"\n    >\n      {meteors.map((meteor, i) => (\n        <span\n          key={i}\n          className={cn(\n            \"motion-safe:animate-meteor motion-reduce:hidden absolute size-0.5 rounded-full bg-foreground/70 shadow-[0_0_0_1px_rgba(255,255,255,0.08)]\",\n            \"before:absolute before:top-1/2 before:h-px before:w-[70px] before:-translate-y-1/2 before:bg-gradient-to-r before:from-foreground/60 before:to-transparent\",\n            className\n          )}\n          style={{\n            left: meteor.left,\n            top: meteor.top,\n            animationDelay: meteor.delay,\n            animationDuration: meteor.duration,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/meteors.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-meteor": "meteor 5s linear infinite"
    }
  },
  "css": {
    "@keyframes meteor": {
      "0%": {
        "transform": "rotate(var(--meteor-angle, 215deg)) translateX(0)",
        "opacity": "1"
      },
      "70%": {
        "opacity": "1"
      },
      "100%": {
        "transform": "rotate(var(--meteor-angle, 215deg)) translateX(-600px)",
        "opacity": "0"
      }
    }
  },
  "type": "registry:ui"
}