diff --git a/.changeset/forty-pears-nail.md b/.changeset/forty-pears-nail.md
new file mode 100644
index 00000000..ecebacd1
--- /dev/null
+++ b/.changeset/forty-pears-nail.md
@@ -0,0 +1,5 @@
+---
+'@288-toolkit/sprite-animation': major
+---
+
+Breaking: upgrade to svelte-5
diff --git a/packages/components/dismissable/vitest.config.js b/packages/components/dismissable/vitest.config.js
index d7b1f54a..bb9613a1 100644
--- a/packages/components/dismissable/vitest.config.js
+++ b/packages/components/dismissable/vitest.config.js
@@ -1,5 +1,6 @@
 import { svelteInlineComponent } from '@288-toolkit/vite-plugin-svelte-inline-component';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineProject, mergeConfig } from 'vitest/config';
 import baseConfig from '../../../vitest.shared';
 
@@ -10,6 +11,6 @@ export default mergeConfig(
 			setupFiles: ['./test/setup.ts'],
 			alias: [{ find: /^svelte$/, replacement: 'svelte/internal' }]
 		},
-		plugins: [sveltekit(), svelteInlineComponent()]
+		plugins: [sveltekit(), svelteTesting(), svelteInlineComponent()]
 	})
 );
diff --git a/packages/components/sprite-animation/README.md b/packages/components/sprite-animation/README.md
index 2975cfd7..f2ee8311 100644
--- a/packages/components/sprite-animation/README.md
+++ b/packages/components/sprite-animation/README.md
@@ -19,69 +19,14 @@ less than one, it won't start the animation.
 
 ## Props
 
-### url
-
-The URL of the sprite.
-
-```ts
-export let url: string;
-```
-
-### width
-
-The width in pixels of a single frame in the sprite.
-
-```ts
-export let width: number;
-```
-
-### height
-
-The height in pixels of a single frame in the sprite.
-
-```ts
-export let height: number;
-```
-
-### speed
-
-The speed in milliseconds of the animation. Default: 100ms.
-
-```ts
-export let speed = 100;
-```
-
-### cols
-
-The number of columns in the sprite.
-
-```ts
-export let cols = 1;
-```
-
-### rows
-
-The number of rows in the sprite.
-
-```ts
-export let rows = 1;
-```
-
-### loop
-
-Whether the animation should loop.
-
-```ts
-export let loop = true;
-```
-
-### still
-
-The still image to show when the animation is not running.
-
-```ts
-export let still: Maybe<string> = null;
-```
+-   `url` - `string`: The URL of the sprite.
+-   `width` - `number`: The width in pixels of a single frame in the sprite.
+-   `height` - `number`: The height in pixels of a single frame in the sprite.
+-   `speed` - `number`: The speed in milliseconds of the animation. Default: 100ms.
+-   `cols` - `number`: The number of columns in the sprite.
+-   `rows` - `number`: The number of rows in the sprite.
+-   `loop` - `boolean`: Whether the animation should loop.
+-   `still` - `string`: The still image to show when the animation is not running.
 
 ## Example
 
diff --git a/packages/components/sprite-animation/package.json b/packages/components/sprite-animation/package.json
index 73b37754..650705f1 100644
--- a/packages/components/sprite-animation/package.json
+++ b/packages/components/sprite-animation/package.json
@@ -28,17 +28,17 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "4.x || 5.x",
-		"motion": "10.x"
+		"motion": "11.x",
+		"svelte": "5.x"
 	},
 	"dependencies": {
 		"@288-toolkit/device": "workspace:^",
 		"@288-toolkit/types": "workspace:^",
-		"esm-env": "1.0.0"
+		"esm-env": "1.2.2"
 	},
 	"devDependencies": {
 		"@288-toolkit/vite-plugin-svelte-inline-component": "workspace:^",
-		"@testing-library/svelte": "^5.1.0",
-		"svelte-preprocess": "5.1.4"
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.6"
 	}
 }
diff --git a/packages/components/sprite-animation/src/lib/SpriteAnimation.svelte b/packages/components/sprite-animation/src/lib/SpriteAnimation.svelte
index 816d8549..ef262cc1 100644
--- a/packages/components/sprite-animation/src/lib/SpriteAnimation.svelte
+++ b/packages/components/sprite-animation/src/lib/SpriteAnimation.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	import { estimatedAvailableMegaBytesPerSeconds } from './estimatedAvailableMegaBytesPerSeconds.js';
 	import { BROWSER, DEV } from 'esm-env';
 
@@ -23,42 +23,55 @@
 	import { inView } from 'motion';
 	import type { Maybe } from '@288-toolkit/types';
 
-	/**
-	 * The url of the sprite.
-	 */
-	export let url: string;
-	/**
-	 * The width in px of a single frame in the sprite.
-	 */
-	export let width: number;
-	/**
-	 * The height in px of a single frame in the sprite.
-	 */
-	export let height: number;
-	/**
-	 * The speed in ms of the animation.
-	 */
-	export let speed = 100;
-	/**
-	 * The number of columns in the sprite.
-	 */
-	export let cols = 1;
-	/**
-	 * The number of rows in the sprite.
-	 */
-	export let rows = 1;
-	/**
-	 * Wether the animation should loop.
-	 */
-	export let loop = true;
-	/**
-	 * The still image to show when the animation is not running.
-	 */
-	export let still: Maybe<string> = null;
+	interface Props {
+		/**
+		 * The url of the sprite.
+		 */
+		url: string;
+		/**
+		 * The width in px of a single frame in the sprite.
+		 */
+		width: number;
+		/**
+		 * The height in px of a single frame in the sprite.
+		 */
+		height: number;
+		/**
+		 * The speed in ms of the animation.
+		 */
+		speed?: number;
+		/**
+		 * The number of columns in the sprite.
+		 */
+		cols?: number;
+		/**
+		 * The number of rows in the sprite.
+		 */
+		rows?: number;
+		/**
+		 * Wether the animation should loop.
+		 */
+		loop?: boolean;
+		/**
+		 * The still image to show when the animation is not running.
+		 */
+		still?: Maybe<string>;
+	}
+
+	let {
+		url,
+		width,
+		height,
+		speed = 100,
+		cols = 1,
+		rows = 1,
+		loop = true,
+		still = null
+	}: Props = $props();
 
 	const count = cols * rows;
 	const paddingRatio = (height / width) * 100;
-	let running = !still;
+	let running = $state(!still);
 	let animation: Animation;
 
 	const createBackgroundPosition = (x: number, y: number) => {
@@ -163,18 +176,20 @@
 		};
 	};
 
-	$: renderedUrl = running || !still ? url : still;
+	let renderedUrl = $derived(running || !still ? url : still);
 
-	$: if (DEV) {
-		if (!url) {
-			throw new Error('Cannot have a sprite with no url');
-		}
-		if (cols < 1 || rows < 1) {
-			throw new Error('Cannot have a sprite with no cols or no rows');
-		}
-		if (width < 1 || height < 1) {
-			throw new Error('Cannot have a sprite with no width or no height');
-		}
+	if (DEV) {
+		$effect(() => {
+			if (!url) {
+				throw new Error('Cannot have a sprite with no url');
+			}
+			if (cols < 1 || rows < 1) {
+				throw new Error('Cannot have a sprite with no cols or no rows');
+			}
+			if (width < 1 || height < 1) {
+				throw new Error('Cannot have a sprite with no width or no height');
+			}
+		});
 	}
 </script>
 
@@ -189,11 +204,11 @@
 			--background-size: {cols * 100}% {rows * 100}%;
 			--padding-bottom: {paddingRatio}%;
 		"
-	/>
+	></div>
 {/if}
 
 <style>
-	:global(._sprite-animation) {
+	._sprite-animation {
 		width: 100%;
 		height: 0;
 		padding-bottom: var(--padding-bottom, 100%);
diff --git a/packages/components/sprite-animation/svelte.config.js b/packages/components/sprite-animation/svelte.config.js
index 5b4b8256..6d1ca31a 100644
--- a/packages/components/sprite-animation/svelte.config.js
+++ b/packages/components/sprite-animation/svelte.config.js
@@ -1,9 +1,9 @@
-import preprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
 	compilerOptions: {
 		accessors: !!process.env.VITEST
 	},
-	preprocess: [preprocess()]
+	preprocess: [vitePreprocess()]
 };
diff --git a/packages/components/sprite-animation/test/SpriteAnimation.spec.ts b/packages/components/sprite-animation/test/SpriteAnimation.spec.ts
index 98120586..a2ac0491 100644
--- a/packages/components/sprite-animation/test/SpriteAnimation.spec.ts
+++ b/packages/components/sprite-animation/test/SpriteAnimation.spec.ts
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/svelte';
+import { render } from '@testing-library/svelte/svelte5';
 import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import SpriteAnimation from '../src/lib/SpriteAnimation.svelte';
 
diff --git a/packages/components/sprite-animation/test/setup.ts b/packages/components/sprite-animation/test/setup.ts
index 8167d143..1597d167 100644
--- a/packages/components/sprite-animation/test/setup.ts
+++ b/packages/components/sprite-animation/test/setup.ts
@@ -1 +1,2 @@
+import '@testing-library/jest-dom/vitest';
 import '../../../../shared/test/mocks/sveltekit';
diff --git a/packages/components/sprite-animation/vitest.config.js b/packages/components/sprite-animation/vitest.config.js
index d7b1f54a..d61884b8 100644
--- a/packages/components/sprite-animation/vitest.config.js
+++ b/packages/components/sprite-animation/vitest.config.js
@@ -1,5 +1,6 @@
 import { svelteInlineComponent } from '@288-toolkit/vite-plugin-svelte-inline-component';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { svelteTesting } from '@testing-library/svelte/vite';
 import { defineProject, mergeConfig } from 'vitest/config';
 import baseConfig from '../../../vitest.shared';
 
@@ -7,9 +8,8 @@ export default mergeConfig(
 	baseConfig,
 	defineProject({
 		test: {
-			setupFiles: ['./test/setup.ts'],
-			alias: [{ find: /^svelte$/, replacement: 'svelte/internal' }]
+			setupFiles: ['./test/setup.ts']
 		},
-		plugins: [sveltekit(), svelteInlineComponent()]
+		plugins: [sveltekit(), svelteTesting(), svelteInlineComponent()]
 	})
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f313bb44..effbd183 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -179,10 +179,10 @@ importers:
         version: link:../../math
       '@sveltejs/kit':
         specifier: 2.x
-        version: 2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.0.0)(vite@5.2.11(@types/node@20.12.7)))(svelte@4.0.0)(vite@5.2.11(@types/node@20.12.7))
+        version: 2.5.8(@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.17)(vite@5.2.11(@types/node@20.12.7)))(svelte@4.2.17)(vite@5.2.11(@types/node@20.12.7))
       svelte:
         specifier: 4.x || 5.x
-        version: 4.0.0
+        version: 4.2.17
 
   packages/components/dismissable:
     dependencies:
@@ -299,24 +299,24 @@ importers:
         specifier: workspace:^
         version: link:../../types
       esm-env:
-        specifier: 1.0.0
-        version: 1.0.0
+        specifier: 1.2.2
+        version: 1.2.2
       motion:
-        specifier: 10.x
-        version: 10.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 11.x
+        version: 11.16.4(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       svelte:
-        specifier: 4.x || 5.x
-        version: 4.0.0
+        specifier: 5.x
+        version: 5.17.2
     devDependencies:
       '@288-toolkit/vite-plugin-svelte-inline-component':
         specifier: workspace:^
         version: link:../../vite-plugin-svelte-inline-component
+      '@testing-library/jest-dom':
+        specifier: ^6.6.3
+        version: 6.6.3
       '@testing-library/svelte':
-        specifier: ^5.1.0
-        version: 5.1.0(svelte@4.0.0)(vite@5.2.11(@types/node@20.12.7))(vitest@2.1.6(@types/node@20.12.7)(jsdom@24.0.0))
-      svelte-preprocess:
-        specifier: 5.1.4
-        version: 5.1.4(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(svelte@4.0.0)(typescript@5.4.5)
+        specifier: ^5.2.6
+        version: 5.2.6(svelte@5.17.2)(vite@5.2.11(@types/node@20.12.7))(vitest@2.1.6(@types/node@20.12.7)(jsdom@24.0.0))
 
   packages/components/video-embed:
     dependencies:
@@ -1981,6 +1981,20 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framer-motion@11.16.4:
+    resolution: {integrity: sha512-7ncPlBjrYX6iQXcTSw1kvZcHSVjEuOAW3uWuu+/+chUS4UWBMe8kCjniE4VMc2/BMo0su0Uw9sw0aWS9anpPWA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   framer-motion@4.1.17:
     resolution: {integrity: sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==}
     peerDependencies:
@@ -2514,6 +2528,12 @@ packages:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
+  motion-dom@11.16.4:
+    resolution: {integrity: sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==}
+
+  motion-utils@11.16.0:
+    resolution: {integrity: sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==}
+
   motion@10.0.0:
     resolution: {integrity: sha512-AZ9E5pgsagcywcS0mRlTFG8y+i9Ud5tO13RvIW0gyrJ7d39KhkbobxdidBeBAVeDmjKNM+lCNpotyGWJIyG6/A==}
     peerDependencies:
@@ -2525,6 +2545,20 @@ packages:
       react-dom:
         optional: true
 
+  motion@11.16.4:
+    resolution: {integrity: sha512-Ut4Lv41Bh8QRmBM56zwVXZsRS/jUTVjS081xnHF7zCl2I24v5Kb5/FU5oogSfCCQY/T/BZnIhkIe5PH8BDZIAA==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -4200,7 +4234,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.2.2
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.14
@@ -4218,7 +4252,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.2.2
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.14
@@ -4254,7 +4288,7 @@ snapshots:
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
-      esm-env: 1.0.0
+      esm-env: 1.2.2
       import-meta-resolve: 4.1.0
       kleur: 4.1.5
       magic-string: 0.30.14
@@ -4401,14 +4435,6 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.1.0(svelte@4.0.0)(vite@5.2.11(@types/node@20.12.7))(vitest@2.1.6(@types/node@20.12.7)(jsdom@24.0.0))':
-    dependencies:
-      '@testing-library/dom': 9.3.4
-      svelte: 4.0.0
-    optionalDependencies:
-      vite: 5.2.11(@types/node@20.12.7)
-      vitest: 2.1.6(@types/node@20.12.7)(jsdom@24.0.0)
-
   '@testing-library/svelte@5.1.0(svelte@5.17.2)(vite@5.2.11(@types/node@20.12.7))(vitest@packages+components+video-embed+@testing-library+jest-dom+vitest)':
     dependencies:
       '@testing-library/dom': 9.3.4
@@ -4425,6 +4451,14 @@ snapshots:
       vite: 5.2.11(@types/node@20.12.7)
       vitest: 2.1.6(@types/node@20.12.7)(jsdom@24.0.0)
 
+  '@testing-library/svelte@5.2.6(svelte@5.17.2)(vite@5.2.11(@types/node@20.12.7))(vitest@2.1.6(@types/node@20.12.7)(jsdom@24.0.0))':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+      svelte: 5.17.2
+    optionalDependencies:
+      vite: 5.2.11(@types/node@20.12.7)
+      vitest: 2.1.6(@types/node@20.12.7)(jsdom@24.0.0)
+
   '@types/argparse@1.0.38': {}
 
   '@types/aria-query@5.0.4': {}
@@ -5507,6 +5541,16 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framer-motion@11.16.4(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      motion-dom: 11.16.4
+      motion-utils: 11.16.0
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   framer-motion@4.1.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       framesync: 5.3.0
@@ -6032,6 +6076,12 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  motion-dom@11.16.4:
+    dependencies:
+      motion-utils: 11.16.0
+
+  motion-utils@11.16.0: {}
+
   motion@10.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       framer-motion: 4.1.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -6042,6 +6092,15 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
+  motion@11.16.4(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      framer-motion: 11.16.4(@emotion/is-prop-valid@0.8.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -6413,7 +6472,7 @@ snapshots:
 
   runed@0.23.0(svelte@5.17.2):
     dependencies:
-      esm-env: 1.0.0
+      esm-env: 1.2.2
       svelte: 5.17.2
 
   sade@1.8.1:
@@ -6714,19 +6773,6 @@ snapshots:
     dependencies:
       svelte: 5.17.2
 
-  svelte-preprocess@5.1.4(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(svelte@4.0.0)(typescript@5.4.5):
-    dependencies:
-      '@types/pug': 2.0.10
-      detect-indent: 6.1.0
-      magic-string: 0.30.14
-      sorcery: 0.11.1
-      strip-indent: 3.0.0
-      svelte: 4.0.0
-    optionalDependencies:
-      postcss: 8.4.49
-      postcss-load-config: 3.1.4(postcss@8.4.49)
-      typescript: 5.4.5
-
   svelte-preprocess@5.1.4(postcss-load-config@3.1.4(postcss@8.4.49))(postcss@8.4.49)(svelte@4.2.17)(typescript@5.4.5):
     dependencies:
       '@types/pug': 2.0.10