Hyper Text

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { motion, AnimatePresence } from "motion-sv";
4	import { cn } from "$UTILS$";
5 
6	type CharacterSet = string[] | readonly string[];
7 
8	type ElementType = "div" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
9 
10	interface HyperTextProps {
11		text: string;
12		class?: string;
13		duration?: number;
14		delay?: number;
15		as?: ElementType;
16		startOnView?: boolean;
17		animateOnHover?: boolean;
18		characterSet?: CharacterSet;
19	}
20 
21	let {
22		text,
23		class: className,
24		duration = 800,
25		delay = 0,
26		as = "div",
27		startOnView = false,
28		animateOnHover = true,
29		characterSet = Object.freeze("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")) as readonly string[],
30	}: HyperTextProps = $props();
31 
32	let MotionComponent = $derived(motion[as]);
33 
34	let displayText = $state<string[]>([]);
35	let isAnimating = $state(false);
36	let iterationCount = $state(0);
37	let elementRef: any = $state(null);
38 
39	// Initialize displayText when text changes
40	$effect(() => {
41		displayText = text.split("");
42	});
43 
44	const getRandomInt = (max: number): number => Math.floor(Math.random() * max);
45 
46	const handleAnimationTrigger = () => {
47		if (animateOnHover && !isAnimating) {
48			iterationCount = 0;
49			isAnimating = true;
50		}
51	};
52 
53	// Handle animation start based on view or delay
54	onMount(() => {
55		if (!startOnView) {
56			const startTimeout = setTimeout(() => {
57				isAnimating = true;
58			}, delay);
59			return () => clearTimeout(startTimeout);
60		}
61 
62		const observer = new IntersectionObserver(
63			([entry]) => {
64				if (entry.isIntersecting) {
65					setTimeout(() => {
66						isAnimating = true;
67					}, delay);
68					observer.disconnect();
69				}
70			},
71			{ threshold: 0.1, rootMargin: "-30% 0px -30% 0px" }
72		);
73 
74		if (elementRef) {
75			observer.observe(elementRef);
76		}
77 
78		return () => observer.disconnect();
79	});
80 
81	// Handle scramble animation
82	$effect(() => {
83		if (!isAnimating) return;
84 
85		const maxIterations = text.length;
86		const startTime = performance.now();
87		let animationFrameId: number;
88 
89		const animate = (currentTime: number) => {
90			const elapsed = currentTime - startTime;
91			const progress = Math.min(elapsed / duration, 1);
92 
93			iterationCount = progress * maxIterations;
94 
95			displayText = displayText.map((letter, index) =>
96				letter === " "
97					? letter
98					: index <= iterationCount
99						? text[index]
100						: characterSet[getRandomInt(characterSet.length)]
101			);
102 
103			if (progress < 1) {
104				animationFrameId = requestAnimationFrame(animate);
105			} else {
106// … truncated