Light Rays

1<script lang="ts">
2	import { motion } from "motion-sv";
3	import { cn } from "$UTILS$";
4 
5	interface LightRay {
6		id: string;
7		left: number;
8		rotate: number;
9		width: number;
10		swing: number;
11		delay: number;
12		duration: number;
13		intensity: number;
14	}
15 
16	interface LightRaysProps {
17		class?: string;
18		count?: number;
19		color?: string;
20		blur?: number;
21		speed?: number;
22		length?: string;
23		style?: string;
24	}
25 
26	let {
27		class: className,
28		count = 7,
29		color = "rgba(160, 210, 255, 0.2)",
30		blur = 36,
31		speed = 14,
32		length = "70vh",
33		style,
34		...props
35	}: LightRaysProps = $props();
36 
37	let rays = $state<LightRay[]>([]);
38	let cycleDuration = $derived(Math.max(speed, 0.1));
39 
40	let createRays = (count: number, cycle: number): LightRay[] => {
41		if (count <= 0) return [];
42 
43		return Array.from({ length: count }, (_, index) => {
44			const left = 8 + Math.random() * 84;
45			const rotate = -28 + Math.random() * 56;
46			const width = 160 + Math.random() * 160;
47			const swing = 0.8 + Math.random() * 1.8;
48			const delay = Math.random() * cycle;
49			const duration = cycle * (0.75 + Math.random() * 0.5);
50			const intensity = 0.6 + Math.random() * 0.5;
51 
52			return {
53				id: `${index}-${Math.round(left * 10)}`,
54				left,
55				rotate,
56				width,
57				swing,
58				delay,
59				duration,
60				intensity,
61			};
62		});
63	};
64 
65	// onMount(() => {
66	// 	rays = createRays(count, cycleDuration);
67	// });
68 
69	$effect(() => {
70		rays = createRays(count, cycleDuration);
71	});
72</script>
73 
74<div
75	class={cn(
76		"pointer-events-none absolute inset-0 isolate overflow-hidden rounded-[inherit]",
77		className
78	)}
79	style="--light-rays-color: {color}; --light-rays-blur: {blur}px; --light-rays-length: {length}; {style ||
80		''}"
81	{...props}
82>
83	<div class="absolute inset-0 overflow-hidden">
84		<div
85			aria-hidden="true"
86			class="absolute inset-0 opacity-60"
87			style="background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--light-rays-color) 45%, transparent), transparent 70%)"
88		></div>
89		<div
90			aria-hidden="true"
91			class="absolute inset-0 opacity-60"
92			style="background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--light-rays-color) 35%, transparent), transparent 75%)"
93		></div>
94		{#each rays as ray (ray.id)}
95			<motion.div
96				class="pointer-events-none absolute -top-[12%] h-(--light-rays-length) origin-top -translate-x-1/2 rounded-full bg-linear-to-b from-[color-mix(in_srgb,var(--light-rays-color)_70%,transparent)] to-transparent opacity-0 mix-blend-screen blur-(--light-rays-blur)"
97// … truncated