fix: use modern Spring implementation

.changeset/tiny-colts-trade.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/create': patch
+---
+
+fix: use modern `Spring` implementation

packages/create/templates/demo/package.json

@@ -11,8 +11,8 @@
 	"devDependencies": {
 		"@fontsource/fira-mono": "^5.0.0",
 		"@neoconfetti/svelte": "^2.0.0",
-		"@sveltejs/adapter-auto": "workspace:*",
-		"@sveltejs/kit": "workspace:*",
+		"@sveltejs/adapter-auto": "^3",
+		"@sveltejs/kit": "^2",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"svelte": "^5.0.0",
 		"typescript": "^5.3.3",

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

@@ -1,15 +1,8 @@
 <script lang="ts">
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 
-	let count = $state(0);
-
-	// svelte-ignore state_referenced_locally
-	const displayedCount = spring(count);
-
-	$effect(() => {
-		displayedCount.set(count);
-	});
-	let offset = $derived(modulo($displayedCount, 1));
+	const count = new Spring(0);
+	const offset = $derived(modulo(count.current, 1));
 
 	/**
 	 * @param {number} n
@@ -22,20 +15,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>