Shimmering Text

1<script lang="ts">
2	import { cn } from "$UTILS$.js";
3	import { animate, inView } from "motion";
4 
5	let {
6		text,
7		duration = 2,
8		delay = 0,
9		repeat = true,
10		repeatDelay = 0.5,
11		class: className,
12		startOnView = true,
13		once = false,
14		inViewMargin,
15		spread = 2,
16		color,
17		shimmerColor,
18	}: {
19		/** Text to display with the shimmer effect. */
20		text: string;
21		/**
22		 * Duration of one shimmer sweep in seconds.
23		 * @default 2
24		 */
25		duration?: number;
26		/**
27		 * Seconds to wait before the first sweep begins.
28		 * @default 0
29		 */
30		delay?: number;
31		/**
32		 * Whether the shimmer sweep loops indefinitely.
33		 * @default true
34		 */
35		repeat?: boolean;
36		/**
37		 * Pause between repeats in seconds when `repeat` is `true`.
38		 * @default 0.5
39		 */
40		repeatDelay?: number;
41		/** Extra classes merged onto the root `<span>`. */
42		class?: string;
43		/**
44		 * When `true`, the animation only starts once the element scrolls into
45		 * view. When `false`, it begins on mount.
46		 * @default true
47		 */
48		startOnView?: boolean;
49		/**
50		 * When `true`, the animation fires a single time and never again.
51		 * When `false`, it replays each time the element re-enters the viewport.
52		 * @default false
53		 */
54		once?: boolean;
55		/**
56		 * Root margin passed to the underlying Motion `inView` observer — used
57		 * to shrink or expand the viewport trigger area (e.g. `"0px 0px -10%"`).
58		 */
59		inViewMargin?: NonNullable<Parameters<typeof inView>[2]>["margin"];
60		/**
61		 * Spread multiplier applied to the shimmer highlight width. The final
62		 * spread scales with text length (`text.length * spread` pixels).
63		 * @default 2
64		 */
65		spread?: number;
66		/** Base text color. Defaults to `var(--muted-foreground)`. */
67		color?: string;
68		/** Highlight gradient color. Defaults to `var(--foreground)`. */
69		shimmerColor?: string;
70	} = $props();
71 
72	let ref = $state<HTMLSpanElement>();
73	let isInView = $state(false);
74	let hasAnimated = $state(false);
75	let shimmerControls: ReturnType<typeof animate> | undefined;
76	let fadeControls: ReturnType<typeof animate> | undefined;
77 
78	let dynamicSpread = $derived(text.length * spread);
79	let shouldAnimate = $derived(!startOnView || isInView);
80 
81	// Viewport detection
82	$effect(() => {
83		if (!ref) return;
84		return inView(
85			ref,
86			() => {
87				isInView = true;
88				if (!once) {
89					return () => {
90						isInView = false;
91					};
92				}
93			},
94			{ margin: inViewMargin }
95		);
96	});
97 
98	// Shimmer animation
99	$effect(() => {
100		if (!ref || !shouldAnimate) return;
101// … truncated