Number Ticker

1<script lang="ts">
2	import { onMount } from "svelte";
3	import { useInView } from "motion-sv";
4	import { cn } from "$UTILS$";
5 
6	interface NumberTickerProps {
7		value: number;
8		startValue?: number;
9		direction?: "up" | "down";
10		delay?: number;
11		decimalPlaces?: number;
12		class?: string;
13		prefix?: string;
14		suffix?: string;
15		once?: boolean;
16	}
17 
18	let {
19		value,
20		startValue = 0,
21		direction = "up",
22		delay = 0,
23		decimalPlaces = 0,
24		class: className,
25		prefix = "",
26		suffix = "",
27		once = true,
28	}: NumberTickerProps = $props();
29 
30	let spanRef: HTMLSpanElement | null = $state(null);
31 
32	// Spring configuration
33	const damping = 60;
34	const stiffness = 100;
35 
36	// Spring physics simulation
37	function animateValue(from: number, to: number) {
38		const startTime = performance.now();
39		const duration = 2000; // Duration in ms
40 
41		let velocity = 0;
42		let position = from;
43		const target = to;
44 
45		function step(currentTime: number) {
46			const elapsed = currentTime - startTime;
47			const dt = 16.67 / 1000; // ~60fps in seconds
48 
49			// Spring physics
50			const springForce = -stiffness * (position - target);
51			const dampingForce = -damping * velocity;
52			const acceleration = springForce + dampingForce;
53 
54			velocity += acceleration * dt;
55			position += velocity * dt;
56 
57			// Update display
58			if (spanRef) {
59				spanRef.textContent = `${prefix}${Intl.NumberFormat("en-US", {
60					minimumFractionDigits: decimalPlaces,
61					maximumFractionDigits: decimalPlaces,
62				}).format(Number(position.toFixed(decimalPlaces)))}${suffix}`;
63			}
64 
65			// Continue animation if not settled
66			const isSettled = Math.abs(velocity) < 0.01 && Math.abs(position - target) < 0.01;
67			if (!isSettled && elapsed < duration * 2) {
68				requestAnimationFrame(step);
69			} else if (spanRef) {
70				// Ensure final value is exact
71				spanRef.textContent = `${prefix}${Intl.NumberFormat("en-US", {
72					minimumFractionDigits: decimalPlaces,
73					maximumFractionDigits: decimalPlaces,
74				}).format(Number(target.toFixed(decimalPlaces)))}${suffix}`;
75			}
76		}
77 
78		requestAnimationFrame(step);
79	}
80 
81	const view = useInView(
82		() => spanRef!,
83		() =>
84			({
85				once: once,
86				margin: "0px",
87			}) as any
88	);
89	$effect(() => {
90		let timer: ReturnType<typeof setTimeout> | null = null;
91		if (view.current) {
92			timer = setTimeout(() => {
93				animateValue(
94					direction === "down" ? value : startValue,
95					direction === "down" ? startValue : value
96				);
97			}, delay);
98		}
99		return () => {
100			if (timer !== null) {
101				clearTimeout(timer);
102// … truncated