Dia Text Reveal

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import {
4		animate,
5		motion,
6		useInView,
7		useMotionValue,
8		useReducedMotion,
9		useTransform,
10		type AnimationPlaybackControls,
11		type MotionHTMLAttributes,
12		type MotionProps,
13	} from "motion-sv";
14	import { untrack } from "svelte";
15 
16	const DEFAULT_COLORS = ["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"];
17	const BAND_HALF = 17;
18	const SWEEP_START = -BAND_HALF;
19	const SWEEP_END = 100 + BAND_HALF;
20 
21	type DiaTextRevealProps = Omit<
22		MotionProps<"span"> & MotionHTMLAttributes<"span">,
23		"children" | "style" | "animate" | "transition" | "color"
24	> & {
25		text: string | string[];
26		colors?: string[];
27		textColor?: string;
28		duration?: number;
29		delay?: number;
30		repeat?: boolean;
31		repeatDelay?: number;
32		triggerOnView?: boolean;
33		once?: boolean;
34		class?: string;
35		fixedWidth?: boolean;
36	};
37 
38	const sweepEase = (t: number) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);
39 
40	function buildGradient(pos: number, colors: string[], textColor: string) {
41		const bandStart = pos - BAND_HALF;
42		const bandEnd = pos + BAND_HALF;
43 
44		if (bandStart >= 100) {
45			return `linear-gradient(90deg, ${textColor}, ${textColor})`;
46		}
47 
48		const count = colors.length;
49		const parts: string[] = [];
50 
51		if (bandStart > 0) {
52			parts.push(`${textColor} 0%`, `${textColor} ${bandStart.toFixed(2)}%`);
53		}
54 
55		colors.forEach((color, index) => {
56			const pct = count === 1 ? pos : bandStart + (index / (count - 1)) * BAND_HALF * 2;
57			parts.push(`${color} ${pct.toFixed(2)}%`);
58		});
59 
60		if (bandEnd < 100) {
61			parts.push(`transparent ${bandEnd.toFixed(2)}%`, "transparent 100%");
62		}
63 
64		return `linear-gradient(90deg, ${parts.join(", ")})`;
65	}
66 
67	function measureWidths(element: HTMLElement, texts: string[]) {
68		const ghost = element.cloneNode() as HTMLElement;
69 
70		Object.assign(ghost.style, {
71			position: "absolute",
72			visibility: "hidden",
73			pointerEvents: "none",
74			width: "auto",
75			whiteSpace: "nowrap",
76		});
77 
78		element.parentElement?.appendChild(ghost);
79 
80		const widths = texts.map((text) => {
81			ghost.textContent = text;
82			return ghost.getBoundingClientRect().width;
83		});
84 
85		ghost.remove();
86		return widths;
87	}
88 
89	let {
90		text,
91		colors = DEFAULT_COLORS,
92		textColor = "var(--foreground)",
93		duration = 1.5,
94		delay = 0,
95		repeat = false,
96		repeatDelay = 0.5,
97		triggerOnView = true,
98		once = true,
99		class: className,
100		fixedWidth = false,
101		...props
102	}: DiaTextRevealProps = $props();
103 
104// … truncated