Meteors

import { motion, useReducedMotion } from 'motion/react';

const ANGLE = 35; // degrees below horizontal, shared by every meteor
const TRAVEL = 700; // px along that angle

// Fixed values instead of Math.random() in render, so server and client match.
const METEORS = Array.from({ length: 16 }, (_, i) => ({
  left: `${((i * 37) % 110) - 25}%`,
  top: `${((i * 53) % 70) - 20}%`,
  tail: 70 + ((i * 29) % 110),
  duration: 3 + ((i * 7) % 6),
  // A negative delay starts each meteor partway through its cycle.
  delay: -((i * 1.3) % 8)
}));

export function Meteors() {
  const reduceMotion = useReducedMotion();
  if (reduceMotion) return null; // a still, empty sky

  return (
    <div
      aria-hidden
      className='pointer-events-none absolute inset-0 overflow-hidden'
    >
      {METEORS.map((meteor, i) => {
        const loop = {
          duration: meteor.duration,
          delay: meteor.delay,
          repeat: Infinity,
          ease: 'linear'
        } as const;
        return (
          // The wrapper sets the angle; the streak only moves along x.
          <div
            key={i}
            className='absolute'
            style={{
              left: meteor.left,
              top: meteor.top,
              rotate: `${ANGLE}deg`
            }}
          >
            {/* In flight for the first 40% of each cycle, then hidden, so the
                meteors fire at uneven intervals. */}
            <motion.div
              initial={{ x: 0, opacity: 0 }}
              animate={{ x: [0, TRAVEL, TRAVEL], opacity: [0, 1, 1, 0, 0] }}
              transition={{
                x: { ...loop, times: [0, 0.4, 1] },
                opacity: { ...loop, times: [0, 0.04, 0.3, 0.4, 1] }
              }}
            >
              <span
                className='absolute right-0 h-px -translate-y-1/2 bg-linear-to-r from-transparent to-white'
                style={{ width: meteor.tail }}
              />
              <span className='absolute right-0 size-[3px] translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_0_8px_2px_rgb(255_255_255/0.5)]' />
            </motion.div>
          </div>
        );
      })}
    </div>
  );
}