"use client"; import { useMemo } from "react"; import { motion } from "framer-motion"; import { cn } from "@/lib/utils"; const seeded = (i: number, s = 1) => Math.abs(Math.sin(i * 78.233 * s + s * 1.7)); export function Meteors({ number = 22, className, }: { number?: number; className?: string; }) { // All meteors fall along the same diagonal (down-right). The streak is // rotated to that angle so the glowing head leads and the tail trails behind. const angleDeg = 55; const rad = (angleDeg * Math.PI) / 180; const meteors = useMemo( () => Array.from({ length: number }, (_, i) => { const dist = 480 + seeded(i, 0.7) * 380; // round anything rendered into DOM style so SSR and client match const r = (n: number) => Math.round(n * 1000) / 1000; return { left: r(-10 + seeded(i, 1.7) * 115), top: r(-20 + seeded(i, 2.3) * 55), delay: seeded(i, 3.1) * 6, duration: 2.2 + seeded(i, 1.3) * 2.4, repeatGap: 1.5 + seeded(i, 4.4) * 3.5, tail: 55 + Math.round(seeded(i, 2.9) * 70), dx: r(Math.cos(rad) * dist), dy: r(Math.sin(rad) * dist), }; }), [number, rad] ); return (

{meteors.map((m, i) => ( {/* glowing head at the leading (right) end */} ))}

); } export default function Demo() { return (

Meteor shower

Streaks of light fall across the night, each with a glowing head and a tapering tail.

); }