Typing Animation

1<script lang="ts">
2	import { motion, type MotionProps, inView } from "motion-sv";
3	import { cn } from "$UTILS$.js";
4	import { watch } from "runed";
5 
6	interface TypingAnimationProps extends MotionProps {
7		content?: string; // Single text string to type
8		words?: string[]; // Array of words to cycle through
9		class?: string;
10		duration?: number;
11		typeSpeed?: number;
12		deleteSpeed?: number;
13		delay?: number;
14		pauseDelay?: number;
15		loop?: boolean;
16		startOnView?: boolean;
17		showCursor?: boolean;
18		blinkCursor?: boolean;
19		cursorStyle?: "line" | "block" | "underscore";
20	}
21 
22	let {
23		content,
24		words,
25		class: className,
26		duration = 100,
27		typeSpeed,
28		deleteSpeed,
29		delay = 0,
30		pauseDelay = 1000,
31		loop = false,
32		startOnView = true,
33		showCursor = true,
34		blinkCursor = true,
35		cursorStyle = "line",
36		...props
37	}: TypingAnimationProps = $props();
38 
39	let displayedText = $state("");
40	let currentWordIndex = $state(0);
41	let currentCharIndex = $state(0);
42	let phase = $state<"typing" | "pause" | "deleting">("typing");
43 
44	let elementRef: HTMLElement | null = $state(null);
45 
46	let wordsToAnimate = $derived(words || (content ? [content] : []));
47	let hasMultipleWords = $derived(wordsToAnimate.length > 1);
48	let typingSpeed = $derived(typeSpeed || duration);
49	let deletingSpeed = $derived(deleteSpeed || typingSpeed / 2);
50 
51	// State: Track if element is in view
52	let isInView = $state(false);
53 
54	// Watch elementRef to setup inView detection
55	watch(
56		() => elementRef,
57		() => {
58			if (!startOnView) {
59				isInView = true;
60				return;
61			}
62 
63			if (!elementRef) return;
64 
65			// Use motion-sv's inView for detection
66			const cleanup = inView(
67				elementRef,
68				() => {
69					isInView = true;
70				},
71				{ amount: 0.3 }
72			);
73 
74			return cleanup;
75		}
76	);
77 
78	// Derived: Should animation start
79	let shouldStart = $derived(startOnView ? isInView : true);
80 
81	// Animation loop using watch - only watches shouldStart
82	let timeoutId: ReturnType<typeof setTimeout> | undefined;
83 
84	let runAnimation = () => {
85		if (!shouldStart || wordsToAnimate.length === 0) return;
86 
87		const currentWord = wordsToAnimate[currentWordIndex] || "";
88		const graphemes = Array.from(currentWord);
89 
90		// Calculate delay based on current phase and initial delay
91		const timeoutDelay =
92			delay > 0 && displayedText === ""
93				? delay
94				: phase === "typing"
95					? typingSpeed
96					: phase === "deleting"
97						? deletingSpeed
98						: pauseDelay;
99 
100		timeoutId = setTimeout(() => {
101			switch (phase) {
102				case "typing":
103// … truncated