Meteors

1"use client"
2 
3import React, { useEffect, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface MeteorsProps {
8  number?: number
9  minDelay?: number
10  maxDelay?: number
11  minDuration?: number
12  maxDuration?: number
13  angle?: number
14  className?: string
15}
16 
17export const Meteors = ({
18  number = 20,
19  minDelay = 0.2,
20  maxDelay = 1.2,
21  minDuration = 2,
22  maxDuration = 10,
23  angle = 215,
24  className,
25}: MeteorsProps) => {
26  const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(
27    []
28  )
29 
30  useEffect(() => {
31    const styles = [...new Array(number)].map(() => ({
32      "--angle": -angle + "deg",
33      top: "-5%",
34      left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,
35      animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + "s",
36      animationDuration:
37        Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) +
38        "s",
39    }))
40    setMeteorStyles(styles)
41  }, [number, minDelay, maxDelay, minDuration, maxDuration, angle])
42 
43  return (
44    <>
45      {[...meteorStyles].map((style, idx) => (
46        // Meteor Head
47        <span
48          key={idx}
49          style={{ ...style }}
50          className={cn(
51            "animate-meteor pointer-events-none absolute size-0.5 rotate-(--angle) rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]",
52            className
53          )}
54        >
55          {/* Meteor Tail */}
56          <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" />
57        </span>
58      ))}
59    </>
60  )
61}