"use client";

import * as React from "react";
import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

type Meteor = {
  id: number;
  left: number;
  top: number;
  length: number;
  duration: number;
  delay: number;
  travel: number;
  angle: number;
  opacity: number;
};

const createMeteors = (count: number): Meteor[] =>
  Array.from({ length: count }, (_, index) => ({
    id: index,
    left: Math.random() * 100,
    top: Math.random() * 100,
    length: Math.random() * 120 + 80,
    duration: Math.random() * 4 + 3,
    delay: Math.random() * 4,
    travel: Math.random() * 240 + 160,
    angle: Math.random() * 20 + 35,
    opacity: Math.random() * 0.35 + 0.35,
  }));

export interface MeteorsBackgroundProps
  extends React.HTMLAttributes<HTMLDivElement> {
  count?: number;
}

export function MeteorsBackground({
  count = 14,
  className,
  children,
  ...props
}: MeteorsBackgroundProps) {
  const meteors = React.useMemo(() => createMeteors(count), [count]);

  return (
    <div
      className={cn("relative overflow-hidden", className)}
      {...props}
    >
      <div
        className="pointer-events-none absolute inset-0"
        aria-hidden="true"
      >
        {meteors.map((meteor) => (
          <motion.span
            key={meteor.id}
            className="absolute left-0 top-0 h-px rounded-full"
            style={{
              width: meteor.length,
              left: `${meteor.left}%`,
              top: `${meteor.top}%`,
              rotate: meteor.angle,
              backgroundImage: `linear-gradient(90deg, rgba(var(--muted) / ${meteor.opacity}), transparent)`,
            }}
            animate={{
              x: meteor.travel,
              y: meteor.travel,
              opacity: [0, 1, 0],
            }}
            transition={{
              duration: meteor.duration,
              delay: meteor.delay,
              repeat: Infinity,
              ease: "linear",
            }}
          />
        ))}
      </div>
      <div className="relative z-10">{children}</div>
    </div>
  );
}
Meteors Background

Meteor Drift

Dependencies

Files

Installation
