Meteors

Card content

import { cn } from '@/lib/utils'

export const Meteors = ({
  number,
  className,
}: {
  number?: number
  className?: string
}) => {
  const meteors = new Array(number || 20).fill(true)
  return (
    <>
      {meteors.map((el, idx) => (
        <span
          key={'meteor' + idx}
          className={cn(
            'animate-meteor-effect absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]',
            "before:absolute before:top-1/2 before:h-[1px] before:w-[50px] before:translate-y-[-50%] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent before:content-['']",
            className
          )}
          style={{
            top: 0,
            left: Math.floor(Math.random() * (400 - -400) + -400) + 'px',
            animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + 's',
            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + 's',
          }}
        />
      ))}
    </>
  )
}

tailwind.config.js

{
  "module.exports": {
    "theme": {
      "extend": {
        "keyframes": {
          "meteor": {
            "0%": {
              "transform": "rotate(215deg) translateX(0)",
              "opacity": "1"
            },
            "70%": {
              "opacity": "1"
            },
            "100%": {
              "transform": "rotate(215deg) translateX(-500px)",
              "opacity": "0"
            }
          }
        },
        "animation": {
          "meteor-effect": "meteor 5s linear infinite"
        }
      }
    }
  }
}