update spring tutorial

Author: Rich-Harris

apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-a/src/lib/App.svelte

@@ -1,23 +1,21 @@
 <script>
-	import { writable } from 'svelte/store';
-
-	let coords = writable({ x: 50, y: 50 });
-	let size = writable(10);
+	let coords = $state({ x: 50, y: 50 });
+	let size = $state(10);
 </script>
 
 <svg
 	onmousemove={(e) => {
-		coords.set({ x: e.clientX, y: e.clientY });
+		coords = { x: e.clientX, y: e.clientY };
 	}}
-	onmousedown={() => size.set(30)}
-	onmouseup={() => size.set(10)}
+	onmousedown={() => (size = 30)}
+	onmouseup={() => (size = 10)}
 	role="presentation"
 >
 	<circle
-		cx={$coords.x}
-		cy={$coords.y}
-		r={$size}
-	/>
+		cx={coords.x}
+		cy={coords.y}
+		r={size}
+	></circle>
 </svg>
 
 <div class="controls">

apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/+assets/app-b/src/lib/App.svelte

@@ -1,26 +1,26 @@
 <script>
-	import { spring } from 'svelte/motion';
+	import { Spring } from 'svelte/motion';
 
-	let coords = spring({ x: 50, y: 50 }, {
+	let coords = new Spring({ x: 50, y: 50 }, {
 		stiffness: 0.1,
 		damping: 0.25
 	});
 
-	let size = spring(10);
+	let size = new Spring(10);
 </script>
 
 <svg
 	onmousemove={(e) => {
-		coords.set({ x: e.clientX, y: e.clientY });
+		coords.target = { x: e.clientX, y: e.clientY };
 	}}
-	onmousedown={() => size.set(30)}
-	onmouseup={() => size.set(10)}
+	onmousedown={() => (size.target = 30)}
+	onmouseup={() => (size.target = 10)}
 	role="presentation"
 >
 	<circle
-		cx={$coords.x}
-		cy={$coords.y}
-		r={$size}
+		cx={coords.current.x}
+		cy={coords.current.y}
+		r={size.current}
 	/>
 </svg>
 

apps/svelte.dev/content/tutorial/02-advanced-svelte/03-motion/02-springs/index.md

@@ -2,25 +2,48 @@
 title: Springs
 ---
 
-The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
+The `Spring` class is an alternative to `Tween` that often works better for values that are frequently changing.
 
-In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
+In this example we have a circle that follows the mouse, and two values — the circle's coordinates, and its size. Let's convert them to springs:
 
 ```svelte
 /// file: App.svelte
 <script>
-	import { +++spring+++ } from 'svelte/+++motion+++';
+	+++import { Spring } from 'svelte/motion+++';
 
-	let coords = +++spring+++({ x: 50, y: 50 });
-	let size = +++spring+++(10);
+	let coords = +++new Spring+++({ x: 50, y: 50 });
+	let size = +++new Spring+++(10);
 </script>
 ```
 
+As with `Tween`, springs have a writable `target` property and a readonly `current` property. Update the event handlers...
+
+```svelte
+<svg
+	onmousemove={(e) => {
+		coords.+++target+++ = { x: e.clientX, y: e.clientY };
+	}}
+	onmousedown={() => (size.+++target+++ = 30)}
+	onmouseup={() => (size.+++target+++ = 10)}
+	role="presentation"
+>
+```
+
+...and the `<circle>` attributes:
+
+```svelte
+<circle
+	cx={coords.+++current+++.x}
+	cy={coords.+++current+++.y}
+	r={size.+++current+++}
+></circle>
+```
+
 Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
 
 ```js
 /// file: App.svelte
-let coords = spring({ x: 50, y: 50 }, +++{
+let coords = new Spring({ x: 50, y: 50 }, +++{
 	stiffness: 0.1,
 	damping: 0.25
 }+++);