Meteors

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import { onMount } from "svelte";
4 
5	interface Props {
6		number?: number;
7		minDelay?: number;
8		maxDelay?: number;
9		minDuration?: number;
10		maxDuration?: number;
11		angle?: number;
12		class?: string;
13	}
14 
15	let {
16		number = 20,
17		minDelay = 0.2,
18		maxDelay = 1.2,
19		minDuration = 2,
20		maxDuration = 10,
21		angle = 215,
22		class: className,
23	}: Props = $props();
24 
25	type MeteorStyle = {
26		angle: string;
27		top: string;
28		left: string;
29		animationDelay: string;
30		animationDuration: string;
31	};
32 
33	let meteorStyles: MeteorStyle[] = $state([]);
34 
35	let updateMeteors = () => {
36		const styles = [...new Array(number)].map(() => ({
37			angle: -angle + "deg",
38			top: "-5%",
39			left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,
40			animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + "s",
41			animationDuration:
42				Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) + "s",
43		}));
44		meteorStyles = styles;
45	};
46	onMount(() => {
47		updateMeteors();
48	});
49</script>
50 
51{#each meteorStyles as style, idx (idx)}
52	<span
53		style="--angle: {style.angle}; top: {style.top}; left: {style.left}; animation-delay: {style.animationDelay}; animation-duration: {style.animationDuration};"
54		class={cn(
55			"animate-meteor pointer-events-none absolute size-0.5 rotate-(--angle) rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]",
56			className
57		)}
58	>
59		<div
60			class="pointer-events-none absolute top-1/2 -z-10 h-px w-12.5 -translate-y-1/2 bg-linear-to-r from-zinc-500 to-transparent"
61		></div>
62	</span>
63{/each}