Animated Gradient Text

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { Snippet } from "svelte";
4 
5	type AnimatedGradientTextProps = {
6		speed?: number;
7		colorFrom?: string;
8		colorTo?: string;
9		children: Snippet;
10		class?: string;
11		rest?: Record<string, any>;
12	};
13 
14	let {
15		speed = 1,
16		colorFrom = "#ffaa40",
17		colorTo = "#9c40ff",
18		children,
19		class: className = "",
20		...rest
21	}: AnimatedGradientTextProps = $props();
22</script>
23 
24<span
25	style="--color-from:{colorFrom}; --color-to:{colorTo}; --bg-size:{300 * speed}%"
26	{...rest}
27	class={cn(
28		`animate-gradient inline bg-linear-to-r from-(--color-from) via-(--color-to) to-(--color-from) bg-size-[var(--bg-size)_100%] bg-clip-text text-transparent`,
29		className
30	)}
31>
32	{@render children?.()}
33</span>