Morphing Text

1<script lang="ts">
2	import { onMount, onDestroy } from "svelte";
3	import { cn } from "$UTILS$";
4 
5	interface MorphingTextProps {
6		texts: string[];
7		class?: string;
8	}
9 
10	let { texts, class: className }: MorphingTextProps = $props();
11 
12	const morphTime = 1.5;
13	const cooldownTime = 0.5;
14 
15	let textIndex = $state(0);
16	let morph = $state(0);
17	let cooldown = $state(0);
18	let time = $state(new Date());
19 
20	let text1Ref: HTMLSpanElement | null = $state(null);
21	let text2Ref: HTMLSpanElement | null = $state(null);
22 
23	let animationFrameId: number | null = null;
24 
25	const setStyles = (fraction: number) => {
26		if (!text1Ref || !text2Ref) return;
27 
28		text2Ref.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
29		text2Ref.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
30 
31		const invertedFraction = 1 - fraction;
32		text1Ref.style.filter = `blur(${Math.min(8 / invertedFraction - 8, 100)}px)`;
33		text1Ref.style.opacity = `${Math.pow(invertedFraction, 0.4) * 100}%`;
34 
35		text1Ref.textContent = texts[textIndex % texts.length];
36		text2Ref.textContent = texts[(textIndex + 1) % texts.length];
37	};
38 
39	const doMorph = () => {
40		morph -= cooldown;
41		cooldown = 0;
42 
43		let fraction = morph / morphTime;
44 
45		if (fraction > 1) {
46			cooldown = cooldownTime;
47			fraction = 1;
48		}
49 
50		setStyles(fraction);
51 
52		if (fraction === 1) {
53			textIndex++;
54		}
55	};
56 
57	const doCooldown = () => {
58		morph = 0;
59		if (text1Ref && text2Ref) {
60			text2Ref.style.filter = "none";
61			text2Ref.style.opacity = "100%";
62			text1Ref.style.filter = "none";
63			text1Ref.style.opacity = "0%";
64		}
65	};
66 
67	const animate = () => {
68		animationFrameId = requestAnimationFrame(animate);
69 
70		const newTime = new Date();
71		const dt = (newTime.getTime() - time.getTime()) / 1000;
72		time = newTime;
73 
74		cooldown -= dt;
75 
76		if (cooldown <= 0) {
77			doMorph();
78		} else {
79			doCooldown();
80		}
81	};
82 
83	onMount(() => {
84		animate();
85	});
86 
87	onDestroy(() => {
88		if (animationFrameId !== null) {
89			cancelAnimationFrame(animationFrameId);
90		}
91	});
92</script>
93 
94<div
95	class={cn(
96		"relative mx-auto h-16 w-full max-w-3xl text-center font-sans text-[40pt] leading-none font-bold filter-[url(#threshold)_blur(0.6px)] md:h-24 lg:text-[6rem]",
97		className
98	)}
99>
100	<span bind:this={text1Ref} class="absolute inset-x-0 top-0 m-auto inline-block w-full"></span>
101	<span bind:this={text2Ref} class="absolute inset-x-0 top-0 m-auto inline-block w-full"></span>
102 
103	<svg id="filters" class="fixed h-0 w-0" preserveAspectRatio="xMidYMid slice">
104		<defs>
105			<filter id="threshold">
106// … truncated