use Spring class

Author: Thiagolino8

packages/create/templates/demo/src/routes/Counter.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 
-	let count = $state(0);
+	let count = new Spring(0);
 
-	// svelte-ignore state_referenced_locally
-	const displayedCount = spring(count);
-
-	$effect(() => {
-		displayedCount.set(count);
-	});
-	let offset = $derived(modulo($displayedCount, 1));
+	let offset = $derived(modulo(count.current, 1));
 
 	/**
 	 * @param {number} n
@@ -22,20 +16,20 @@
 </script>
 
 <div class="counter">
-	<button onclick={() => (count -= 1)} aria-label="Decrease the counter by one">
+	<button onclick={() => (count.target -= 1)} aria-label="Decrease the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5" />
 		</svg>
 	</button>
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
-			<strong>{Math.floor($displayedCount)}</strong>
+			<strong class="hidden" aria-hidden="true">{Math.floor(count.current + 1)}</strong>
+			<strong>{Math.floor(count.current)}</strong>
 		</div>
 	</div>
 
-	<button onclick={() => (count += 1)} aria-label="Increase the counter by one">
+	<button onclick={() => (count.target += 1)} aria-label="Increase the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
 		</svg>