Number Ticker

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { spring } from 'svelte/motion';
4	import { onMount } from 'svelte';
5 
6	let {
7		value = 0,
8		initial = 0,
9		duration = 1000,
10		class: className
11	}: {
12		value: number;
13		initial?: number;
14		duration?: number;
15		class?: string;
16	} = $props();
17 
18	const count = spring(initial, {
19		stiffness: 0.1,
20		damping: 0.4
21	});
22 
23	let element: HTMLSpanElement;
24	let isVisible = false;
25 
26	onMount(() => {
27		const observer = new IntersectionObserver(
28			(entries) => {
29				if (entries[0].isIntersecting && !isVisible) {
30					isVisible = true;
31					count.set(value);
32				}
33			},
34			{ threshold: 0.1 }
35		);
36 
37		if (element) observer.observe(element);
38 
39		return () => observer.disconnect();
40	});
41 
42	let displayValue = $derived(Math.round($count).toLocaleString('en-US'));
43</script>
44 
45<span bind:this={element} class={cn('tabular-nums tracking-tight text-foreground', className)}>
46	{displayValue}
47</span>