{
  "name": "shooting-stars",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/shooting-stars.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport React, { useEffect, useState, useRef } from \"react\";\n\ninterface ShootingStar {\n  id: number;\n  x: number;\n  y: number;\n  angle: number;\n  scale: number;\n  speed: number;\n  distance: number;\n}\n\ninterface ShootingStarsProps {\n  minSpeed?: number;\n  maxSpeed?: number;\n  minDelay?: number;\n  maxDelay?: number;\n  starColor?: string;\n  trailColor?: string;\n  starWidth?: number;\n  starHeight?: number;\n  className?: string;\n}\n\nconst getRandomStartPoint = () => {\n  const side = Math.floor(Math.random() * 4);\n  const offset = Math.random() * window.innerWidth;\n\n  switch (side) {\n    case 0:\n      return { x: offset, y: 0, angle: 45 };\n    case 1:\n      return { x: window.innerWidth, y: offset, angle: 135 };\n    case 2:\n      return { x: offset, y: window.innerHeight, angle: 225 };\n    case 3:\n      return { x: 0, y: offset, angle: 315 };\n    default:\n      return { x: 0, y: 0, angle: 45 };\n  }\n};\nexport const ShootingStars: React.FC<ShootingStarsProps> = ({\n  minSpeed = 10,\n  maxSpeed = 30,\n  minDelay = 1200,\n  maxDelay = 4200,\n  starColor = \"#9E00FF\",\n  trailColor = \"#2EB9DF\",\n  starWidth = 10,\n  starHeight = 1,\n  className,\n}) => {\n  const [star, setStar] = useState<ShootingStar | null>(null);\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  useEffect(() => {\n    const createStar = () => {\n      const { x, y, angle } = getRandomStartPoint();\n      const newStar: ShootingStar = {\n        id: Date.now(),\n        x,\n        y,\n        angle,\n        scale: 1,\n        speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,\n        distance: 0,\n      };\n      setStar(newStar);\n\n      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay;\n      setTimeout(createStar, randomDelay);\n    };\n\n    createStar();\n\n    return () => {};\n  }, [minSpeed, maxSpeed, minDelay, maxDelay]);\n\n  useEffect(() => {\n    const moveStar = () => {\n      if (star) {\n        setStar((prevStar) => {\n          if (!prevStar) return null;\n          const newX =\n            prevStar.x +\n            prevStar.speed * Math.cos((prevStar.angle * Math.PI) / 180);\n          const newY =\n            prevStar.y +\n            prevStar.speed * Math.sin((prevStar.angle * Math.PI) / 180);\n          const newDistance = prevStar.distance + prevStar.speed;\n          const newScale = 1 + newDistance / 100;\n          if (\n            newX < -20 ||\n            newX > window.innerWidth + 20 ||\n            newY < -20 ||\n            newY > window.innerHeight + 20\n          ) {\n            return null;\n          }\n          return {\n            ...prevStar,\n            x: newX,\n            y: newY,\n            distance: newDistance,\n            scale: newScale,\n          };\n        });\n      }\n    };\n\n    const animationFrame = requestAnimationFrame(moveStar);\n    return () => cancelAnimationFrame(animationFrame);\n  }, [star]);\n\n  return (\n    <svg\n      ref={svgRef}\n      className={cn(\"w-full h-full absolute inset-0\", className)}\n    >\n      {star && (\n        <rect\n          key={star.id}\n          x={star.x}\n          y={star.y}\n          width={starWidth * star.scale}\n          height={starHeight}\n          fill=\"url(#gradient)\"\n          transform={`rotate(${star.angle}, ${\n            star.x + (starWidth * star.scale) / 2\n          }, ${star.y + starHeight / 2})`}\n        />\n      )}\n      <defs>\n        <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" style={{ stopColor: trailColor, stopOpacity: 0 }} />\n          <stop\n            offset=\"100%\"\n            style={{ stopColor: starColor, stopOpacity: 1 }}\n          />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/shooting-stars.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Shooting Stars"
}