Meteors Background

/* Positions are derived from the index rather than Math.random() so the server
   and client render the same markup — random values here cause a hydration error. */
const METEORS = Array.from({ length: 8 }, (_, i) => ({
  left: (i * 17) % 100,
  top: (i * 23) % 100,
  delay: i * 0.3,
}));

export function MeteorsBackground({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative grid h-40 place-items-center overflow-hidden rounded-xl">
      <div className="absolute inset-0" aria-hidden>
        {METEORS.map((m, i) => (
          <span key={i} className="absolute h-px w-16 animate-[meteor_2s_linear_infinite] bg-gradient-to-r from-transparent via-white/50 to-transparent"
            style={{ left: `${m.left}%`, top: `${m.top}%`, animationDelay: `${m.delay}s`, transform: "rotate(-45deg)" }} />
        ))}
      </div>
      <div className="relative">{children}</div>
    </div>
  );
}