{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meteors",
  "type": "registry:ui",
  "title": "Meteors",
  "description": "A meteor shower effect.",
  "files": [
    {
      "path": "registry/magicui/meteors.tsx",
      "content": "\"use client\"\n\nimport React, { useEffect, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface MeteorsProps {\n  number?: number\n  minDelay?: number\n  maxDelay?: number\n  minDuration?: number\n  maxDuration?: number\n  angle?: number\n  className?: string\n}\n\nexport const Meteors = ({\n  number = 20,\n  minDelay = 0.2,\n  maxDelay = 1.2,\n  minDuration = 2,\n  maxDuration = 10,\n  angle = 215,\n  className,\n}: MeteorsProps) => {\n  const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(\n    []\n  )\n\n  useEffect(() => {\n    const styles = [...new Array(number)].map(() => ({\n      \"--angle\": -angle + \"deg\",\n      top: \"-5%\",\n      left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,\n      animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + \"s\",\n      animationDuration:\n        Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) +\n        \"s\",\n    }))\n    setMeteorStyles(styles)\n  }, [number, minDelay, maxDelay, minDuration, maxDuration, angle])\n\n  return (\n    <>\n      {[...meteorStyles].map((style, idx) => (\n        // Meteor Head\n        <span\n          key={idx}\n          style={{ ...style }}\n          className={cn(\n            \"animate-meteor pointer-events-none absolute size-0.5 rotate-(--angle) rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]\",\n            className\n          )}\n        >\n          {/* Meteor Tail */}\n          <div className=\"pointer-events-none absolute top-1/2 -z-10 h-px w-12.5 -translate-y-1/2 bg-linear-to-r from-zinc-500 to-transparent\" />\n        </span>\n      ))}\n    </>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-meteor": "meteor 5s linear infinite"
    }
  },
  "css": {
    "@keyframes meteor": {
      "0%": {
        "transform": "rotate(var(--angle)) translateX(0)",
        "opacity": "1"
      },
      "70%": {
        "opacity": "1"
      },
      "100%": {
        "transform": "rotate(var(--angle)) translateX(-500px)",
        "opacity": "0"
      }
    }
  }
}