Sparkles Text

1<script lang="ts">
2	import type { Snippet } from "svelte";
3	import { untrack } from "svelte";
4	import type { HTMLAttributes, SvelteHTMLElements } from "svelte/elements";
5	import { motion } from "motion-sv";
6	import { cn } from "$UTILS$";
7 
8	interface Sparkle {
9		id: string;
10		x: string;
11		y: string;
12		color: string;
13		delay: number;
14		scale: number;
15		lifespan: number;
16	}
17 
18	interface SparklesTextProps extends HTMLAttributes<HTMLElement> {
19		as?: keyof SvelteHTMLElements;
20		class?: string;
21		children: Snippet;
22		sparklesCount?: number;
23		colors?: {
24			first: string;
25			second: string;
26		};
27	}
28 
29	let {
30		as = "div",
31		children,
32		class: className,
33		style: styleProp,
34		sparklesCount = 10,
35		colors = { first: "#9E7AFF", second: "#FE8BBB" },
36		...restProps
37	}: SparklesTextProps = $props();
38 
39	let sparkles = $state<Sparkle[]>([]);
40 
41	function generateStar(): Sparkle {
42		const starX = `${Math.random() * 100}%`;
43		const starY = `${Math.random() * 100}%`;
44		const color = Math.random() > 0.5 ? colors.first : colors.second;
45		const delay = Math.random() * 2;
46		const scale = Math.random() * 1 + 0.3;
47		const lifespan = Math.random() * 10 + 5;
48		const id = `${starX}-${starY}-${Date.now()}`;
49 
50		return { id, x: starX, y: starY, color, delay, scale, lifespan };
51	}
52 
53	$effect(() => {
54		colors.first;
55		colors.second;
56		sparklesCount;
57 
58		sparkles = Array.from({ length: sparklesCount }, generateStar);
59 
60		const interval = setInterval(() => {
61			const currentSparkles = untrack(() => sparkles);
62 
63			sparkles = currentSparkles.map((star) => {
64				if (star.lifespan <= 0) {
65					return generateStar();
66				}
67 
68				return { ...star, lifespan: star.lifespan - 0.1 };
69			});
70		}, 100);
71 
72		return () => clearInterval(interval);
73	});
74 
75	const rootStyle = $derived(
76		[
77			`--sparkles-first-color: ${colors.first}`,
78			`--sparkles-second-color: ${colors.second}`,
79			styleProp,
80		]
81			.filter(
82				(value): value is string => value !== undefined && value !== null && value !== ""
83			)
84			.join("; ")
85	);
86</script>
87 
88<svelte:element
89	this={as}
90	class={cn("text-6xl font-medium", className)}
91	style={rootStyle}
92	{...restProps}
93>
94	<span class="relative inline-block">
95		{#each sparkles as sparkle (sparkle.id)}
96			<motion.svg
97				class="pointer-events-none absolute z-20"
98				initial={{ opacity: 0 }}
99				animate={{
100					opacity: [0, 1, 0],
101					scale: [0, sparkle.scale, 0],
102					rotate: [75, 120, 150],
103				}}
104				transition={{ duration: 0.8, repeat: Infinity, delay: sparkle.delay }}
105// … truncated