Stagger Text

1<script lang="ts" module>
2	export const variants: Variants = {
3		initial: { y: 0 },
4		animate: (i: number) => ({
5			y: "-100%",
6			transition: {
7				delay: i * 0.04,
8				duration: 0.4,
9				ease: "easeInOut",
10				type: "tween" as const,
11			},
12		}),
13		exit: (i: number) => ({
14			y: 0,
15			transition: { delay: i * 0.02, duration: 0.3 },
16		}),
17	};
18</script>
19 
20<script lang="ts">
21	import { motion, type Variants } from "motion-sv";
22	import { cn } from "$UTILS$";
23 
24	type StaggerTextElement = "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
25 
26	interface StaggerTextProps {
27		text: string;
28		class?: string;
29		as?: StaggerTextElement;
30	}
31 
32	let { text = "text", class: className, as = "h3" }: StaggerTextProps = $props();
33 
34	let MotionComponent = $derived(motion[as]);
35 
36	let activeIndex = $state(5);
37	let isActive = $state(false);
38 
39	const handleCopy = (e: ClipboardEvent) => {
40		e.preventDefault();
41		if (e.clipboardData) {
42			e.clipboardData.setData("text/plain", text);
43		}
44	};
45</script>
46 
47<h1 class="sr-only">
48	{text}
49</h1>
50<MotionComponent
51	class={cn("overflow-clip tracking-wide select-text", className)}
52	aria-label={text}
53	oncopy={handleCopy}
54>
55	{#each text.split("") as char, i (i)}
56		{@const delay = Math.abs(activeIndex - i)}
57		<motion.span
58			class="relative inline-flex flex-col"
59			role="presentation"
60			onmouseenter={() => {
61				activeIndex = i;
62				isActive = true;
63			}}
64			onmouseleave={() => {
65				activeIndex = -1;
66				isActive = false;
67			}}
68		>
69			<!-- Original text -->
70			<motion.span
71				class="h-fit select-none"
72				aria-hidden="true"
73				{variants}
74				custom={delay}
75				initial="initial"
76				animate={isActive ? "animate" : "exit"}
77			>
78				{char === " " ? " " : char}
79			</motion.span>
80 
81			<!-- Copy text (animated from below) -->
82			<motion.span
83				class="absolute top-[0] left-0 h-fit w-full select-text"
84				style={{ translate: "0 100%" }}
85				aria-hidden="true"
86				{variants}
87				custom={delay}
88				initial="initial"
89				animate={isActive ? "animate" : "exit"}
90			>
91				{char === " " ? " " : char}
92			</motion.span>
93		</motion.span>
94	{/each}
95</MotionComponent>