diff --git a/src/lib/icons.spec.ts b/src/lib/icons.spec.ts
index 8402406b..c34dce43 100644
Binary files a/src/lib/icons.spec.ts and b/src/lib/icons.spec.ts differ
diff --git a/src/lib/icons/audio-lines.svelte b/src/lib/icons/audio-lines.svelte
index 57d618e6..30a63b80 100644
--- a/src/lib/icons/audio-lines.svelte
+++ b/src/lib/icons/audio-lines.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { IconProps } from './types.js';
 
 	let {
@@ -214,15 +215,15 @@
 		}
 	}
 
-	function handleMouseEnter() {
-		hoverAnimate = true;
+	function startLoop() {
 		isAnimatingBack = false;
 		startTime = null;
-		animationFrameId = requestAnimationFrame(animateFrame);
+		if (!animationFrameId) {
+			animationFrameId = requestAnimationFrame(animateFrame);
+		}
 	}
 
-	function handleMouseLeave() {
-		hoverAnimate = false;
+	function settleBack() {
 		startPositions = {
 			line1: { y1: line1Y1, y2: line1Y2 },
 			line2: { y1: line2Y1, y2: line2Y2 },
@@ -237,6 +238,28 @@
 			animationFrameId = requestAnimationFrame(animateFrame);
 		}
 	}
+
+	function handleMouseEnter() {
+		hoverAnimate = true;
+		startLoop();
+	}
+
+	function handleMouseLeave() {
+		hoverAnimate = false;
+		// A parent still asking for animation keeps the loop running.
+		if (!animateProp) settleBack();
+	}
+
+	// The loop is driven imperatively, so the prop needs an explicit start/stop.
+	// untrack keeps this effect depending on animateProp alone - reading the frame
+	// state as a dependency would re-run it on every frame.
+	$effect(() => {
+		const on = animateProp;
+		untrack(() => {
+			if (on) startLoop();
+			else if (!hoverAnimate && animationFrameId) settleBack();
+		});
+	});
 </script>
 
 <div
diff --git a/src/lib/icons/bot.svelte b/src/lib/icons/bot.svelte
index 886ba587..7605e0a6 100644
--- a/src/lib/icons/bot.svelte
+++ b/src/lib/icons/bot.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { IconProps } from './types.js';
 
 	let {
@@ -49,7 +50,9 @@
 	}
 
 	function handleMouseEnter() {
-		if (animate) return;
+		// hoverAnimate doubles as the in-flight flag: guard on it, not on the
+		// animate union, or a parent holding animate=true would block every blink.
+		if (hoverAnimate) return;
 		hoverAnimate = true;
 		animateEyes(13, 15, 14, 14, 250, 200).then(() => {
 			animateEyes(14, 14, 13, 15, 250).then(() => {
@@ -58,6 +61,11 @@
 		});
 	}
 
+	// The blink is driven imperatively, so the prop has to trigger it explicitly.
+	$effect(() => {
+		if (animateProp) untrack(handleMouseEnter);
+	});
+
 	$effect(() => () => clearTimeout(entryTimer));
 </script>
 
diff --git a/src/lib/icons/eye.svelte b/src/lib/icons/eye.svelte
index ae1b5d12..98921599 100644
--- a/src/lib/icons/eye.svelte
+++ b/src/lib/icons/eye.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { IconProps } from './types.js';
 
 	let {
@@ -84,6 +85,12 @@
 		});
 	}
 
+	// The blink morph is driven imperatively, so the prop has to trigger it
+	// explicitly; the pupil scaling is CSS and follows the class union below.
+	$effect(() => {
+		if (animateProp) untrack(handleMouseEnter);
+	});
+
 	const topOutlineD = $derived(topArchPath(morphProgress));
 	const bottomOutlineD = $derived(bottomArchPath(morphProgress));
 </script>
diff --git a/src/lib/icons/message-circle-more.svelte b/src/lib/icons/message-circle-more.svelte
index b8e1a742..d1d3d6d2 100644
--- a/src/lib/icons/message-circle-more.svelte
+++ b/src/lib/icons/message-circle-more.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { IconProps } from './types.js';
 
 	let {
@@ -67,7 +68,9 @@
 	}
 
 	function handleMouseEnter() {
-		if (animate) return;
+		// hoverAnimate doubles as the in-flight flag: guard on it, not on the
+		// animate union, or a parent holding animate=true would block the dots.
+		if (hoverAnimate) return;
 		hoverAnimate = true;
 
 		animateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0.2, (y1, y2) => {
@@ -90,6 +93,12 @@
 		}, 800);
 	}
 
+	// The dot animation is driven imperatively, so the prop has to trigger it
+	// explicitly; the group rotation is CSS and follows the animate union.
+	$effect(() => {
+		if (animateProp) untrack(handleMouseEnter);
+	});
+
 	$effect(() => () => clearTimeout(resetTimer));
 </script>
 
diff --git a/src/lib/icons/message-square-more.svelte b/src/lib/icons/message-square-more.svelte
index ce9e6d93..9f3f42f1 100644
--- a/src/lib/icons/message-square-more.svelte
+++ b/src/lib/icons/message-square-more.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import type { IconProps } from './types.js';
 
 	let {
@@ -67,7 +68,9 @@
 	}
 
 	function handleMouseEnter() {
-		if (animate) return;
+		// hoverAnimate doubles as the in-flight flag: guard on it, not on the
+		// animate union, or a parent holding animate=true would block the dots.
+		if (hoverAnimate) return;
 		hoverAnimate = true;
 
 		animateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.2, (y1, y2) => {
@@ -90,6 +93,12 @@
 		}, 800);
 	}
 
+	// The dot animation is driven imperatively, so the prop has to trigger it
+	// explicitly; the group rotation is CSS and follows the animate union.
+	$effect(() => {
+		if (animateProp) untrack(handleMouseEnter);
+	});
+
 	$effect(() => () => clearTimeout(resetTimer));
 </script>
 
diff --git a/static/r/audio-lines.json b/static/r/audio-lines.json
index 98df4ab1..fd42a79a 100644
--- a/static/r/audio-lines.json
+++ b/static/r/audio-lines.json
@@ -9,7 +9,7 @@
 		{
 			"type": "registry:component",
 			"target": "~/src/lib/components/movingicons/audio-lines.svelte",
-			"content": "<script lang=\"ts\">\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet line1Y1 = $state(10);\n\tlet line1Y2 = $state(13);\n\tlet line2Y1 = $state(6);\n\tlet line2Y2 = $state(17);\n\tlet line3Y1 = $state(3);\n\tlet line3Y2 = $state(21);\n\tlet line4Y1 = $state(8);\n\tlet line4Y2 = $state(15);\n\tlet line5Y1 = $state(5);\n\tlet line5Y2 = $state(18);\n\tlet line6Y1 = $state(10);\n\tlet line6Y2 = $state(13);\n\n\tlet animationFrameId = $state<number | null>(null);\n\tlet startTime = $state<number | null>(null);\n\tlet isAnimatingBack = $state(false);\n\tlet startPositions = $state<{\n\t\tline1: { y1: number; y2: number };\n\t\tline2: { y1: number; y2: number };\n\t\tline3: { y1: number; y2: number };\n\t\tline4: { y1: number; y2: number };\n\t\tline5: { y1: number; y2: number };\n\t\tline6: { y1: number; y2: number };\n\t} | null>(null);\n\n\tconst originalPositions = {\n\t\tline1: { y1: 10, y2: 13 },\n\t\tline2: { y1: 6, y2: 17 },\n\t\tline3: { y1: 3, y2: 21 },\n\t\tline4: { y1: 8, y2: 15 },\n\t\tline5: { y1: 5, y2: 18 },\n\t\tline6: { y1: 10, y2: 13 }\n\t};\n\n\tconst line1Keyframes = [\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 5, y2: 18 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 6, y2: 17 },\n\t\t{ y1: 10, y2: 13 }\n\t];\n\n\tconst line2Keyframes = [\n\t\t{ y1: 6, y2: 17 },\n\t\t{ y1: 2, y2: 22 },\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 6, y2: 17 }\n\t];\n\n\tconst line3Keyframes = [\n\t\t{ y1: 3, y2: 21 },\n\t\t{ y1: 6, y2: 17 },\n\t\t{ y1: 3, y2: 21 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 3, y2: 21 }\n\t];\n\n\tconst line4Keyframes = [\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 4, y2: 19 },\n\t\t{ y1: 7, y2: 16 },\n\t\t{ y1: 2, y2: 22 },\n\t\t{ y1: 8, y2: 15 }\n\t];\n\n\tconst line5Keyframes = [\n\t\t{ y1: 5, y2: 18 },\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 4, y2: 19 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 5, y2: 18 }\n\t];\n\n\tconst line6Keyframes = [\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 5, y2: 18 },\n\t\t{ y1: 10, y2: 13 }\n\t];\n\n\tfunction easeOutCubic(t: number): number {\n\t\treturn 1 - Math.pow(1 - t, 3);\n\t}\n\n\tfunction interpolateKeyframes(\n\t\tkeyframes: Array<{ y1: number; y2: number }>,\n\t\tprogress: number\n\t): { y1: number; y2: number } {\n\t\tconst totalFrames = keyframes.length - 1;\n\t\tconst frameIndex = progress * totalFrames;\n\t\tconst frame = Math.floor(frameIndex);\n\t\tconst nextFrame = Math.min(frame + 1, totalFrames);\n\t\tconst t = frameIndex - frame;\n\n\t\tconst current = keyframes[frame];\n\t\tconst next = keyframes[nextFrame];\n\n\t\treturn {\n\t\t\ty1: current.y1 + (next.y1 - current.y1) * t,\n\t\t\ty2: current.y2 + (next.y2 - current.y2) * t\n\t\t};\n\t}\n\n\tfunction animateFrame(timestamp: number): void {\n\t\tif (!startTime) startTime = timestamp;\n\t\tconst elapsed = (timestamp - startTime) / 1000;\n\n\t\tif (isAnimatingBack && startPositions) {\n\t\t\tconst duration = 0.4;\n\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\t\t\tconst easedProgress = easeOutCubic(progress);\n\n\t\t\tline1Y1 =\n\t\t\t\tstartPositions.line1.y1 +\n\t\t\t\t(originalPositions.line1.y1 - startPositions.line1.y1) * easedProgress;\n\t\t\tline1Y2 =\n\t\t\t\tstartPositions.line1.y2 +\n\t\t\t\t(originalPositions.line1.y2 - startPositions.line1.y2) * easedProgress;\n\t\t\tline2Y1 =\n\t\t\t\tstartPositions.line2.y1 +\n\t\t\t\t(originalPositions.line2.y1 - startPositions.line2.y1) * easedProgress;\n\t\t\tline2Y2 =\n\t\t\t\tstartPositions.line2.y2 +\n\t\t\t\t(originalPositions.line2.y2 - startPositions.line2.y2) * easedProgress;\n\t\t\tline3Y1 =\n\t\t\t\tstartPositions.line3.y1 +\n\t\t\t\t(originalPositions.line3.y1 - startPositions.line3.y1) * easedProgress;\n\t\t\tline3Y2 =\n\t\t\t\tstartPositions.line3.y2 +\n\t\t\t\t(originalPositions.line3.y2 - startPositions.line3.y2) * easedProgress;\n\t\t\tline4Y1 =\n\t\t\t\tstartPositions.line4.y1 +\n\t\t\t\t(originalPositions.line4.y1 - startPositions.line4.y1) * easedProgress;\n\t\t\tline4Y2 =\n\t\t\t\tstartPositions.line4.y2 +\n\t\t\t\t(originalPositions.line4.y2 - startPositions.line4.y2) * easedProgress;\n\t\t\tline5Y1 =\n\t\t\t\tstartPositions.line5.y1 +\n\t\t\t\t(originalPositions.line5.y1 - startPositions.line5.y1) * easedProgress;\n\t\t\tline5Y2 =\n\t\t\t\tstartPositions.line5.y2 +\n\t\t\t\t(originalPositions.line5.y2 - startPositions.line5.y2) * easedProgress;\n\t\t\tline6Y1 =\n\t\t\t\tstartPositions.line6.y1 +\n\t\t\t\t(originalPositions.line6.y1 - startPositions.line6.y1) * easedProgress;\n\t\t\tline6Y2 =\n\t\t\t\tstartPositions.line6.y2 +\n\t\t\t\t(originalPositions.line6.y2 - startPositions.line6.y2) * easedProgress;\n\n\t\t\tif (progress < 1) {\n\t\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t\t} else {\n\t\t\t\tline1Y1 = originalPositions.line1.y1;\n\t\t\t\tline1Y2 = originalPositions.line1.y2;\n\t\t\t\tline2Y1 = originalPositions.line2.y1;\n\t\t\t\tline2Y2 = originalPositions.line2.y2;\n\t\t\t\tline3Y1 = originalPositions.line3.y1;\n\t\t\t\tline3Y2 = originalPositions.line3.y2;\n\t\t\t\tline4Y1 = originalPositions.line4.y1;\n\t\t\t\tline4Y2 = originalPositions.line4.y2;\n\t\t\t\tline5Y1 = originalPositions.line5.y1;\n\t\t\t\tline5Y2 = originalPositions.line5.y2;\n\t\t\t\tline6Y1 = originalPositions.line6.y1;\n\t\t\t\tline6Y2 = originalPositions.line6.y2;\n\t\t\t\tisAnimatingBack = false;\n\t\t\t\tstartPositions = null;\n\t\t\t\tanimationFrameId = null;\n\t\t\t}\n\t\t} else {\n\t\t\tconst duration = 1.5;\n\t\t\tconst progress = (elapsed % duration) / duration;\n\n\t\t\tconst line1 = interpolateKeyframes(line1Keyframes, progress);\n\t\t\tline1Y1 = line1.y1;\n\t\t\tline1Y2 = line1.y2;\n\n\t\t\tconst line2 = interpolateKeyframes(line2Keyframes, progress);\n\t\t\tline2Y1 = line2.y1;\n\t\t\tline2Y2 = line2.y2;\n\n\t\t\tconst line3 = interpolateKeyframes(line3Keyframes, progress);\n\t\t\tline3Y1 = line3.y1;\n\t\t\tline3Y2 = line3.y2;\n\n\t\t\tconst line4 = interpolateKeyframes(line4Keyframes, progress);\n\t\t\tline4Y1 = line4.y1;\n\t\t\tline4Y2 = line4.y2;\n\n\t\t\tconst line5 = interpolateKeyframes(line5Keyframes, progress);\n\t\t\tline5Y1 = line5.y1;\n\t\t\tline5Y2 = line5.y2;\n\n\t\t\tconst line6 = interpolateKeyframes(line6Keyframes, progress);\n\t\t\tline6Y1 = line6.y1;\n\t\t\tline6Y2 = line6.y2;\n\n\t\t\tif (animate) {\n\t\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleMouseEnter() {\n\t\thoverAnimate = true;\n\t\tisAnimatingBack = false;\n\t\tstartTime = null;\n\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t}\n\n\tfunction handleMouseLeave() {\n\t\thoverAnimate = false;\n\t\tstartPositions = {\n\t\t\tline1: { y1: line1Y1, y2: line1Y2 },\n\t\t\tline2: { y1: line2Y1, y2: line2Y2 },\n\t\t\tline3: { y1: line3Y1, y2: line3Y2 },\n\t\t\tline4: { y1: line4Y1, y2: line4Y2 },\n\t\t\tline5: { y1: line5Y1, y2: line5Y2 },\n\t\t\tline6: { y1: line6Y1, y2: line6Y2 }\n\t\t};\n\t\tisAnimatingBack = true;\n\t\tstartTime = null;\n\t\tif (!animationFrameId) {\n\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t}\n\t}\n</script>\n\n<div\n\tclass={className}\n\taria-label=\"audio-lines\"\n\trole=\"img\"\n\tonmouseenter={handleMouseEnter}\n\tonmouseleave={handleMouseLeave}\n>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"audio-lines-icon\"\n\t\tclass:animate\n\t>\n\t\t<line x1=\"2\" y1={line1Y1} x2=\"2\" y2={line1Y2} />\n\t\t<line x1=\"6\" y1={line2Y1} x2=\"6\" y2={line2Y2} />\n\t\t<line x1=\"10\" y1={line3Y1} x2=\"10\" y2={line3Y2} />\n\t\t<line x1=\"14\" y1={line4Y1} x2=\"14\" y2={line4Y2} />\n\t\t<line x1=\"18\" y1={line5Y1} x2=\"18\" y2={line5Y2} />\n\t\t<line x1=\"22\" y1={line6Y1} x2=\"22\" y2={line6Y2} />\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\n\t.audio-lines-icon {\n\t\toverflow: visible;\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\timport { untrack } from 'svelte';\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet line1Y1 = $state(10);\n\tlet line1Y2 = $state(13);\n\tlet line2Y1 = $state(6);\n\tlet line2Y2 = $state(17);\n\tlet line3Y1 = $state(3);\n\tlet line3Y2 = $state(21);\n\tlet line4Y1 = $state(8);\n\tlet line4Y2 = $state(15);\n\tlet line5Y1 = $state(5);\n\tlet line5Y2 = $state(18);\n\tlet line6Y1 = $state(10);\n\tlet line6Y2 = $state(13);\n\n\tlet animationFrameId = $state<number | null>(null);\n\tlet startTime = $state<number | null>(null);\n\tlet isAnimatingBack = $state(false);\n\tlet startPositions = $state<{\n\t\tline1: { y1: number; y2: number };\n\t\tline2: { y1: number; y2: number };\n\t\tline3: { y1: number; y2: number };\n\t\tline4: { y1: number; y2: number };\n\t\tline5: { y1: number; y2: number };\n\t\tline6: { y1: number; y2: number };\n\t} | null>(null);\n\n\tconst originalPositions = {\n\t\tline1: { y1: 10, y2: 13 },\n\t\tline2: { y1: 6, y2: 17 },\n\t\tline3: { y1: 3, y2: 21 },\n\t\tline4: { y1: 8, y2: 15 },\n\t\tline5: { y1: 5, y2: 18 },\n\t\tline6: { y1: 10, y2: 13 }\n\t};\n\n\tconst line1Keyframes = [\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 5, y2: 18 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 6, y2: 17 },\n\t\t{ y1: 10, y2: 13 }\n\t];\n\n\tconst line2Keyframes = [\n\t\t{ y1: 6, y2: 17 },\n\t\t{ y1: 2, y2: 22 },\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 6, y2: 17 }\n\t];\n\n\tconst line3Keyframes = [\n\t\t{ y1: 3, y2: 21 },\n\t\t{ y1: 6, y2: 17 },\n\t\t{ y1: 3, y2: 21 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 3, y2: 21 }\n\t];\n\n\tconst line4Keyframes = [\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 4, y2: 19 },\n\t\t{ y1: 7, y2: 16 },\n\t\t{ y1: 2, y2: 22 },\n\t\t{ y1: 8, y2: 15 }\n\t];\n\n\tconst line5Keyframes = [\n\t\t{ y1: 5, y2: 18 },\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 4, y2: 19 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 5, y2: 18 }\n\t];\n\n\tconst line6Keyframes = [\n\t\t{ y1: 10, y2: 13 },\n\t\t{ y1: 8, y2: 15 },\n\t\t{ y1: 5, y2: 18 },\n\t\t{ y1: 10, y2: 13 }\n\t];\n\n\tfunction easeOutCubic(t: number): number {\n\t\treturn 1 - Math.pow(1 - t, 3);\n\t}\n\n\tfunction interpolateKeyframes(\n\t\tkeyframes: Array<{ y1: number; y2: number }>,\n\t\tprogress: number\n\t): { y1: number; y2: number } {\n\t\tconst totalFrames = keyframes.length - 1;\n\t\tconst frameIndex = progress * totalFrames;\n\t\tconst frame = Math.floor(frameIndex);\n\t\tconst nextFrame = Math.min(frame + 1, totalFrames);\n\t\tconst t = frameIndex - frame;\n\n\t\tconst current = keyframes[frame];\n\t\tconst next = keyframes[nextFrame];\n\n\t\treturn {\n\t\t\ty1: current.y1 + (next.y1 - current.y1) * t,\n\t\t\ty2: current.y2 + (next.y2 - current.y2) * t\n\t\t};\n\t}\n\n\tfunction animateFrame(timestamp: number): void {\n\t\tif (!startTime) startTime = timestamp;\n\t\tconst elapsed = (timestamp - startTime) / 1000;\n\n\t\tif (isAnimatingBack && startPositions) {\n\t\t\tconst duration = 0.4;\n\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\t\t\tconst easedProgress = easeOutCubic(progress);\n\n\t\t\tline1Y1 =\n\t\t\t\tstartPositions.line1.y1 +\n\t\t\t\t(originalPositions.line1.y1 - startPositions.line1.y1) * easedProgress;\n\t\t\tline1Y2 =\n\t\t\t\tstartPositions.line1.y2 +\n\t\t\t\t(originalPositions.line1.y2 - startPositions.line1.y2) * easedProgress;\n\t\t\tline2Y1 =\n\t\t\t\tstartPositions.line2.y1 +\n\t\t\t\t(originalPositions.line2.y1 - startPositions.line2.y1) * easedProgress;\n\t\t\tline2Y2 =\n\t\t\t\tstartPositions.line2.y2 +\n\t\t\t\t(originalPositions.line2.y2 - startPositions.line2.y2) * easedProgress;\n\t\t\tline3Y1 =\n\t\t\t\tstartPositions.line3.y1 +\n\t\t\t\t(originalPositions.line3.y1 - startPositions.line3.y1) * easedProgress;\n\t\t\tline3Y2 =\n\t\t\t\tstartPositions.line3.y2 +\n\t\t\t\t(originalPositions.line3.y2 - startPositions.line3.y2) * easedProgress;\n\t\t\tline4Y1 =\n\t\t\t\tstartPositions.line4.y1 +\n\t\t\t\t(originalPositions.line4.y1 - startPositions.line4.y1) * easedProgress;\n\t\t\tline4Y2 =\n\t\t\t\tstartPositions.line4.y2 +\n\t\t\t\t(originalPositions.line4.y2 - startPositions.line4.y2) * easedProgress;\n\t\t\tline5Y1 =\n\t\t\t\tstartPositions.line5.y1 +\n\t\t\t\t(originalPositions.line5.y1 - startPositions.line5.y1) * easedProgress;\n\t\t\tline5Y2 =\n\t\t\t\tstartPositions.line5.y2 +\n\t\t\t\t(originalPositions.line5.y2 - startPositions.line5.y2) * easedProgress;\n\t\t\tline6Y1 =\n\t\t\t\tstartPositions.line6.y1 +\n\t\t\t\t(originalPositions.line6.y1 - startPositions.line6.y1) * easedProgress;\n\t\t\tline6Y2 =\n\t\t\t\tstartPositions.line6.y2 +\n\t\t\t\t(originalPositions.line6.y2 - startPositions.line6.y2) * easedProgress;\n\n\t\t\tif (progress < 1) {\n\t\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t\t} else {\n\t\t\t\tline1Y1 = originalPositions.line1.y1;\n\t\t\t\tline1Y2 = originalPositions.line1.y2;\n\t\t\t\tline2Y1 = originalPositions.line2.y1;\n\t\t\t\tline2Y2 = originalPositions.line2.y2;\n\t\t\t\tline3Y1 = originalPositions.line3.y1;\n\t\t\t\tline3Y2 = originalPositions.line3.y2;\n\t\t\t\tline4Y1 = originalPositions.line4.y1;\n\t\t\t\tline4Y2 = originalPositions.line4.y2;\n\t\t\t\tline5Y1 = originalPositions.line5.y1;\n\t\t\t\tline5Y2 = originalPositions.line5.y2;\n\t\t\t\tline6Y1 = originalPositions.line6.y1;\n\t\t\t\tline6Y2 = originalPositions.line6.y2;\n\t\t\t\tisAnimatingBack = false;\n\t\t\t\tstartPositions = null;\n\t\t\t\tanimationFrameId = null;\n\t\t\t}\n\t\t} else {\n\t\t\tconst duration = 1.5;\n\t\t\tconst progress = (elapsed % duration) / duration;\n\n\t\t\tconst line1 = interpolateKeyframes(line1Keyframes, progress);\n\t\t\tline1Y1 = line1.y1;\n\t\t\tline1Y2 = line1.y2;\n\n\t\t\tconst line2 = interpolateKeyframes(line2Keyframes, progress);\n\t\t\tline2Y1 = line2.y1;\n\t\t\tline2Y2 = line2.y2;\n\n\t\t\tconst line3 = interpolateKeyframes(line3Keyframes, progress);\n\t\t\tline3Y1 = line3.y1;\n\t\t\tline3Y2 = line3.y2;\n\n\t\t\tconst line4 = interpolateKeyframes(line4Keyframes, progress);\n\t\t\tline4Y1 = line4.y1;\n\t\t\tline4Y2 = line4.y2;\n\n\t\t\tconst line5 = interpolateKeyframes(line5Keyframes, progress);\n\t\t\tline5Y1 = line5.y1;\n\t\t\tline5Y2 = line5.y2;\n\n\t\t\tconst line6 = interpolateKeyframes(line6Keyframes, progress);\n\t\t\tline6Y1 = line6.y1;\n\t\t\tline6Y2 = line6.y2;\n\n\t\t\tif (animate) {\n\t\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction startLoop() {\n\t\tisAnimatingBack = false;\n\t\tstartTime = null;\n\t\tif (!animationFrameId) {\n\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t}\n\t}\n\n\tfunction settleBack() {\n\t\tstartPositions = {\n\t\t\tline1: { y1: line1Y1, y2: line1Y2 },\n\t\t\tline2: { y1: line2Y1, y2: line2Y2 },\n\t\t\tline3: { y1: line3Y1, y2: line3Y2 },\n\t\t\tline4: { y1: line4Y1, y2: line4Y2 },\n\t\t\tline5: { y1: line5Y1, y2: line5Y2 },\n\t\t\tline6: { y1: line6Y1, y2: line6Y2 }\n\t\t};\n\t\tisAnimatingBack = true;\n\t\tstartTime = null;\n\t\tif (!animationFrameId) {\n\t\t\tanimationFrameId = requestAnimationFrame(animateFrame);\n\t\t}\n\t}\n\n\tfunction handleMouseEnter() {\n\t\thoverAnimate = true;\n\t\tstartLoop();\n\t}\n\n\tfunction handleMouseLeave() {\n\t\thoverAnimate = false;\n\t\t// A parent still asking for animation keeps the loop running.\n\t\tif (!animateProp) settleBack();\n\t}\n\n\t// The loop is driven imperatively, so the prop needs an explicit start/stop.\n\t// untrack keeps this effect depending on animateProp alone - reading the frame\n\t// state as a dependency would re-run it on every frame.\n\t$effect(() => {\n\t\tconst on = animateProp;\n\t\tuntrack(() => {\n\t\t\tif (on) startLoop();\n\t\t\telse if (!hoverAnimate && animationFrameId) settleBack();\n\t\t});\n\t});\n</script>\n\n<div\n\tclass={className}\n\taria-label=\"audio-lines\"\n\trole=\"img\"\n\tonmouseenter={handleMouseEnter}\n\tonmouseleave={handleMouseLeave}\n>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"audio-lines-icon\"\n\t\tclass:animate\n\t>\n\t\t<line x1=\"2\" y1={line1Y1} x2=\"2\" y2={line1Y2} />\n\t\t<line x1=\"6\" y1={line2Y1} x2=\"6\" y2={line2Y2} />\n\t\t<line x1=\"10\" y1={line3Y1} x2=\"10\" y2={line3Y2} />\n\t\t<line x1=\"14\" y1={line4Y1} x2=\"14\" y2={line4Y2} />\n\t\t<line x1=\"18\" y1={line5Y1} x2=\"18\" y2={line5Y2} />\n\t\t<line x1=\"22\" y1={line6Y1} x2=\"22\" y2={line6Y2} />\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\n\t.audio-lines-icon {\n\t\toverflow: visible;\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": []
diff --git a/static/r/bot.json b/static/r/bot.json
index e7b1227f..1ebb8579 100644
--- a/static/r/bot.json
+++ b/static/r/bot.json
@@ -9,7 +9,7 @@
 		{
 			"type": "registry:component",
 			"target": "~/src/lib/components/movingicons/bot.svelte",
-			"content": "<script lang=\"ts\">\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tlet entryTimer: ReturnType<typeof setTimeout> | undefined;\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet eyeY1 = $state(13);\n\tlet eyeY2 = $state(15);\n\n\tfunction animateEyes(\n\t\tstartY1: number,\n\t\tstartY2: number,\n\t\tendY1: number,\n\t\tendY2: number,\n\t\tduration: number,\n\t\tdelay: number = 0\n\t): Promise<void> {\n\t\treturn new Promise((resolve) => {\n\t\t\tentryTimer = setTimeout(() => {\n\t\t\t\tconst startTime = performance.now();\n\t\t\t\tconst animate = (currentTime: number): void => {\n\t\t\t\t\tconst elapsed = currentTime - startTime;\n\t\t\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\n\t\t\t\t\tconst eased =\n\t\t\t\t\t\tprogress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;\n\n\t\t\t\t\teyeY1 = startY1 + (endY1 - startY1) * eased;\n\t\t\t\t\teyeY2 = startY2 + (endY2 - startY2) * eased;\n\n\t\t\t\t\tif (progress < 1) {\n\t\t\t\t\t\trequestAnimationFrame(animate);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\trequestAnimationFrame(animate);\n\t\t\t}, delay);\n\t\t});\n\t}\n\n\tfunction handleMouseEnter() {\n\t\tif (animate) return;\n\t\thoverAnimate = true;\n\t\tanimateEyes(13, 15, 14, 14, 250, 200).then(() => {\n\t\t\tanimateEyes(14, 14, 13, 15, 250).then(() => {\n\t\t\t\thoverAnimate = false;\n\t\t\t});\n\t\t});\n\t}\n\n\t$effect(() => () => clearTimeout(entryTimer));\n</script>\n\n<div class={className} aria-label=\"bot\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"bot-icon\"\n\t\tclass:animate\n\t>\n\t\t<path d=\"M12 8V4H8\" />\n\t\t<rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" />\n\t\t<path d=\"M2 14h2\" />\n\t\t<path d=\"M20 14h2\" />\n\t\t<line x1=\"15\" y1={eyeY1} x2=\"15\" y2={eyeY2} class=\"eye-right\" />\n\t\t<line x1=\"9\" y1={eyeY1} x2=\"9\" y2={eyeY2} class=\"eye-left\" />\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.bot-icon {\n\t\toverflow: visible;\n\t}\n\n\t.eye-left,\n\t.eye-right {\n\t\ttransition: none;\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\timport { untrack } from 'svelte';\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tlet entryTimer: ReturnType<typeof setTimeout> | undefined;\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet eyeY1 = $state(13);\n\tlet eyeY2 = $state(15);\n\n\tfunction animateEyes(\n\t\tstartY1: number,\n\t\tstartY2: number,\n\t\tendY1: number,\n\t\tendY2: number,\n\t\tduration: number,\n\t\tdelay: number = 0\n\t): Promise<void> {\n\t\treturn new Promise((resolve) => {\n\t\t\tentryTimer = setTimeout(() => {\n\t\t\t\tconst startTime = performance.now();\n\t\t\t\tconst animate = (currentTime: number): void => {\n\t\t\t\t\tconst elapsed = currentTime - startTime;\n\t\t\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\n\t\t\t\t\tconst eased =\n\t\t\t\t\t\tprogress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;\n\n\t\t\t\t\teyeY1 = startY1 + (endY1 - startY1) * eased;\n\t\t\t\t\teyeY2 = startY2 + (endY2 - startY2) * eased;\n\n\t\t\t\t\tif (progress < 1) {\n\t\t\t\t\t\trequestAnimationFrame(animate);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\trequestAnimationFrame(animate);\n\t\t\t}, delay);\n\t\t});\n\t}\n\n\tfunction handleMouseEnter() {\n\t\t// hoverAnimate doubles as the in-flight flag: guard on it, not on the\n\t\t// animate union, or a parent holding animate=true would block every blink.\n\t\tif (hoverAnimate) return;\n\t\thoverAnimate = true;\n\t\tanimateEyes(13, 15, 14, 14, 250, 200).then(() => {\n\t\t\tanimateEyes(14, 14, 13, 15, 250).then(() => {\n\t\t\t\thoverAnimate = false;\n\t\t\t});\n\t\t});\n\t}\n\n\t// The blink is driven imperatively, so the prop has to trigger it explicitly.\n\t$effect(() => {\n\t\tif (animateProp) untrack(handleMouseEnter);\n\t});\n\n\t$effect(() => () => clearTimeout(entryTimer));\n</script>\n\n<div class={className} aria-label=\"bot\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"bot-icon\"\n\t\tclass:animate\n\t>\n\t\t<path d=\"M12 8V4H8\" />\n\t\t<rect width=\"16\" height=\"12\" x=\"4\" y=\"8\" rx=\"2\" />\n\t\t<path d=\"M2 14h2\" />\n\t\t<path d=\"M20 14h2\" />\n\t\t<line x1=\"15\" y1={eyeY1} x2=\"15\" y2={eyeY2} class=\"eye-right\" />\n\t\t<line x1=\"9\" y1={eyeY1} x2=\"9\" y2={eyeY2} class=\"eye-left\" />\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.bot-icon {\n\t\toverflow: visible;\n\t}\n\n\t.eye-left,\n\t.eye-right {\n\t\ttransition: none;\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": []
diff --git a/static/r/eye.json b/static/r/eye.json
index b2dbd293..1bcf093c 100644
--- a/static/r/eye.json
+++ b/static/r/eye.json
@@ -9,7 +9,7 @@
 		{
 			"type": "registry:component",
 			"target": "~/src/lib/components/movingicons/eye.svelte",
-			"content": "<script lang=\"ts\">\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet animating = $state(false);\n\tlet morphProgress = $state(0);\n\tlet frameId = -1;\n\tlet runId = 0;\n\n\tconst closeDurationMs = 120;\n\tconst openDurationMs = 160;\n\tconst lineY = 12;\n\tconst leftX = 2.062;\n\tconst rightX = 21.938;\n\tconst upperEndY = 11.652;\n\tconst lowerEndY = 12.348;\n\tconst archRadiusX = 10.75;\n\tconst archRadiusY = 10.75;\n\n\tconst easeIn = (t: number) => t * t * t;\n\tconst easeOut = (t: number) => 1 - Math.pow(1 - t, 3);\n\n\tconst topArchPath = (t: number) => {\n\t\tconst y = upperEndY + (lineY - upperEndY) * t;\n\t\tconst ry = Math.max(0.001, archRadiusY * (1 - t));\n\t\treturn 'M ' + leftX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + rightX + ' ' + y;\n\t};\n\n\tconst bottomArchPath = (t: number) => {\n\t\tconst y = lowerEndY - (lowerEndY - lineY) * t;\n\t\tconst ry = Math.max(0.001, archRadiusY * (1 - t));\n\t\treturn 'M ' + rightX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + leftX + ' ' + y;\n\t};\n\n\tfunction animateMorph(\n\t\tfrom: number,\n\t\tto: number,\n\t\tdurationMs: number,\n\t\tease: (t: number) => number,\n\t\tcurrentRunId: number,\n\t\tonDone: () => void\n\t) {\n\t\tconst start = performance.now();\n\n\t\tconst tick = (now: number) => {\n\t\t\tif (currentRunId !== runId) return;\n\t\t\tconst elapsed = now - start;\n\t\t\tconst t = Math.min(elapsed / durationMs, 1);\n\t\t\tconst eased = ease(t);\n\t\t\tmorphProgress = from + (to - from) * eased;\n\n\t\t\tif (t < 1) {\n\t\t\t\tframeId = requestAnimationFrame(tick);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDone();\n\t\t};\n\n\t\tframeId = requestAnimationFrame(tick);\n\t}\n\n\tfunction handleMouseEnter() {\n\t\tif (animating) return;\n\t\tif (frameId !== -1) cancelAnimationFrame(frameId);\n\t\trunId += 1;\n\t\tconst currentRunId = runId;\n\t\tanimating = true;\n\n\t\tanimateMorph(0, 1, closeDurationMs, easeIn, currentRunId, () => {\n\t\t\tanimateMorph(1, 0, openDurationMs, easeOut, currentRunId, () => {\n\t\t\t\tif (currentRunId !== runId) return;\n\t\t\t\tanimating = false;\n\t\t\t\tmorphProgress = 0;\n\t\t\t\tframeId = -1;\n\t\t\t});\n\t\t});\n\t}\n\n\tconst topOutlineD = $derived(topArchPath(morphProgress));\n\tconst bottomOutlineD = $derived(bottomArchPath(morphProgress));\n</script>\n\n<div class={className} aria-label=\"eye\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"eye-icon\"\n\t\tclass:animate={animateProp || animating}\n\t>\n\t\t<path d={topOutlineD} class=\"eye-outline\" />\n\t\t<path d={bottomOutlineD} class=\"eye-outline\" />\n\n\t\t<circle cx=\"12\" cy=\"12\" r=\"3\" class=\"eye-pupil\" />\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.eye-icon {\n\t\toverflow: visible;\n\t}\n\t.eye-pupil {\n\t\ttransform-origin: 12px 12px;\n\t}\n\t.eye-icon.animate .eye-pupil {\n\t\tanimation: blinkPupil 0.28s forwards;\n\t}\n\t@keyframes blinkPupil {\n\t\t0% {\n\t\t\ttransform: scaleY(1);\n\t\t\tanimation-timing-function: ease-in;\n\t\t}\n\t\t50% {\n\t\t\ttransform: scaleY(0.042);\n\t\t\tanimation-timing-function: ease-out;\n\t\t}\n\t\t100% {\n\t\t\ttransform: scaleY(1);\n\t\t}\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\timport { untrack } from 'svelte';\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet animating = $state(false);\n\tlet morphProgress = $state(0);\n\tlet frameId = -1;\n\tlet runId = 0;\n\n\tconst closeDurationMs = 120;\n\tconst openDurationMs = 160;\n\tconst lineY = 12;\n\tconst leftX = 2.062;\n\tconst rightX = 21.938;\n\tconst upperEndY = 11.652;\n\tconst lowerEndY = 12.348;\n\tconst archRadiusX = 10.75;\n\tconst archRadiusY = 10.75;\n\n\tconst easeIn = (t: number) => t * t * t;\n\tconst easeOut = (t: number) => 1 - Math.pow(1 - t, 3);\n\n\tconst topArchPath = (t: number) => {\n\t\tconst y = upperEndY + (lineY - upperEndY) * t;\n\t\tconst ry = Math.max(0.001, archRadiusY * (1 - t));\n\t\treturn 'M ' + leftX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + rightX + ' ' + y;\n\t};\n\n\tconst bottomArchPath = (t: number) => {\n\t\tconst y = lowerEndY - (lowerEndY - lineY) * t;\n\t\tconst ry = Math.max(0.001, archRadiusY * (1 - t));\n\t\treturn 'M ' + rightX + ' ' + y + ' A ' + archRadiusX + ' ' + ry + ' 0 0 1 ' + leftX + ' ' + y;\n\t};\n\n\tfunction animateMorph(\n\t\tfrom: number,\n\t\tto: number,\n\t\tdurationMs: number,\n\t\tease: (t: number) => number,\n\t\tcurrentRunId: number,\n\t\tonDone: () => void\n\t) {\n\t\tconst start = performance.now();\n\n\t\tconst tick = (now: number) => {\n\t\t\tif (currentRunId !== runId) return;\n\t\t\tconst elapsed = now - start;\n\t\t\tconst t = Math.min(elapsed / durationMs, 1);\n\t\t\tconst eased = ease(t);\n\t\t\tmorphProgress = from + (to - from) * eased;\n\n\t\t\tif (t < 1) {\n\t\t\t\tframeId = requestAnimationFrame(tick);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDone();\n\t\t};\n\n\t\tframeId = requestAnimationFrame(tick);\n\t}\n\n\tfunction handleMouseEnter() {\n\t\tif (animating) return;\n\t\tif (frameId !== -1) cancelAnimationFrame(frameId);\n\t\trunId += 1;\n\t\tconst currentRunId = runId;\n\t\tanimating = true;\n\n\t\tanimateMorph(0, 1, closeDurationMs, easeIn, currentRunId, () => {\n\t\t\tanimateMorph(1, 0, openDurationMs, easeOut, currentRunId, () => {\n\t\t\t\tif (currentRunId !== runId) return;\n\t\t\t\tanimating = false;\n\t\t\t\tmorphProgress = 0;\n\t\t\t\tframeId = -1;\n\t\t\t});\n\t\t});\n\t}\n\n\t// The blink morph is driven imperatively, so the prop has to trigger it\n\t// explicitly; the pupil scaling is CSS and follows the class union below.\n\t$effect(() => {\n\t\tif (animateProp) untrack(handleMouseEnter);\n\t});\n\n\tconst topOutlineD = $derived(topArchPath(morphProgress));\n\tconst bottomOutlineD = $derived(bottomArchPath(morphProgress));\n</script>\n\n<div class={className} aria-label=\"eye\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"eye-icon\"\n\t\tclass:animate={animateProp || animating}\n\t>\n\t\t<path d={topOutlineD} class=\"eye-outline\" />\n\t\t<path d={bottomOutlineD} class=\"eye-outline\" />\n\n\t\t<circle cx=\"12\" cy=\"12\" r=\"3\" class=\"eye-pupil\" />\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.eye-icon {\n\t\toverflow: visible;\n\t}\n\t.eye-pupil {\n\t\ttransform-origin: 12px 12px;\n\t}\n\t.eye-icon.animate .eye-pupil {\n\t\tanimation: blinkPupil 0.28s forwards;\n\t}\n\t@keyframes blinkPupil {\n\t\t0% {\n\t\t\ttransform: scaleY(1);\n\t\t\tanimation-timing-function: ease-in;\n\t\t}\n\t\t50% {\n\t\t\ttransform: scaleY(0.042);\n\t\t\tanimation-timing-function: ease-out;\n\t\t}\n\t\t100% {\n\t\t\ttransform: scaleY(1);\n\t\t}\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": []
diff --git a/static/r/message-circle-more.json b/static/r/message-circle-more.json
index c9d962b0..136da641 100644
--- a/static/r/message-circle-more.json
+++ b/static/r/message-circle-more.json
@@ -9,7 +9,7 @@
 		{
 			"type": "registry:component",
 			"target": "~/src/lib/components/movingicons/message-circle-more.svelte",
-			"content": "<script lang=\"ts\">\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tlet resetTimer: ReturnType<typeof setTimeout> | undefined;\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet line1Y1 = $state(12);\n\tlet line1Y2 = $state(12);\n\tlet line2Y1 = $state(12);\n\tlet line2Y2 = $state(12);\n\tlet line3Y1 = $state(12);\n\tlet line3Y2 = $state(12);\n\n\tfunction easeInOut(t: number): number {\n\t\treturn t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;\n\t}\n\n\tfunction animateLine(\n\t\tstartY1: number,\n\t\tstartY2: number,\n\t\tmidY1: number,\n\t\tmidY2: number,\n\t\tendY1: number,\n\t\tendY2: number,\n\t\tduration: number,\n\t\tdelay: number,\n\t\tcallback: (y1: number, y2: number) => void\n\t): void {\n\t\tsetTimeout(() => {\n\t\t\tconst startTime = performance.now();\n\t\t\tfunction frame(currentTime: number): void {\n\t\t\t\tconst elapsed = (currentTime - startTime) / 1000;\n\t\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\n\t\t\t\tlet y1, y2;\n\t\t\t\tif (progress < 0.5) {\n\t\t\t\t\tconst t = progress * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = startY1 + (midY1 - startY1) * localEased;\n\t\t\t\t\ty2 = startY2 + (midY2 - startY2) * localEased;\n\t\t\t\t} else {\n\t\t\t\t\tconst t = (progress - 0.5) * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = midY1 + (endY1 - midY1) * localEased;\n\t\t\t\t\ty2 = midY2 + (endY2 - midY2) * localEased;\n\t\t\t\t}\n\n\t\t\t\tcallback(y1, y2);\n\n\t\t\t\tif (progress < 1) {\n\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t} else {\n\t\t\t\t\tcallback(endY1, endY2);\n\t\t\t\t}\n\t\t\t}\n\t\t\trequestAnimationFrame(frame);\n\t\t}, delay * 1000);\n\t}\n\n\tfunction handleMouseEnter() {\n\t\tif (animate) return;\n\t\thoverAnimate = true;\n\n\t\tanimateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0.2, (y1, y2) => {\n\t\t\tline1Y1 = y1;\n\t\t\tline1Y2 = y2;\n\t\t});\n\n\t\tanimateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0.1, (y1, y2) => {\n\t\t\tline2Y1 = y1;\n\t\t\tline2Y2 = y2;\n\t\t});\n\n\t\tanimateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0, (y1, y2) => {\n\t\t\tline3Y1 = y1;\n\t\t\tline3Y2 = y2;\n\t\t});\n\n\t\tresetTimer = setTimeout(() => {\n\t\t\thoverAnimate = false;\n\t\t}, 800);\n\t}\n\n\t$effect(() => () => clearTimeout(resetTimer));\n</script>\n\n<div class={className} aria-label=\"message-circle-more\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"message-circle-more-icon\"\n\t>\n\t\t<g class=\"message-circle-more-group\" class:animate>\n\t\t\t<path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\" />\n\t\t\t<line x1=\"16\" y1={line1Y1} x2=\"16\" y2={line1Y2} />\n\t\t\t<line x1=\"12\" y1={line2Y1} x2=\"12\" y2={line2Y2} />\n\t\t\t<line x1=\"8\" y1={line3Y1} x2=\"8\" y2={line3Y2} />\n\t\t</g>\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.message-circle-more-icon {\n\t\toverflow: visible;\n\t}\n\n\t.message-circle-more-group {\n\t\ttransform-origin: bottom left;\n\t}\n\n\t.message-circle-more-group.animate {\n\t\tanimation: groupRotation 0.8s ease-in-out;\n\t}\n\n\t@keyframes groupRotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t40% {\n\t\t\ttransform: rotate(8deg);\n\t\t}\n\t\t60% {\n\t\t\ttransform: rotate(-8deg);\n\t\t}\n\t\t80% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\timport { untrack } from 'svelte';\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tlet resetTimer: ReturnType<typeof setTimeout> | undefined;\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet line1Y1 = $state(12);\n\tlet line1Y2 = $state(12);\n\tlet line2Y1 = $state(12);\n\tlet line2Y2 = $state(12);\n\tlet line3Y1 = $state(12);\n\tlet line3Y2 = $state(12);\n\n\tfunction easeInOut(t: number): number {\n\t\treturn t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;\n\t}\n\n\tfunction animateLine(\n\t\tstartY1: number,\n\t\tstartY2: number,\n\t\tmidY1: number,\n\t\tmidY2: number,\n\t\tendY1: number,\n\t\tendY2: number,\n\t\tduration: number,\n\t\tdelay: number,\n\t\tcallback: (y1: number, y2: number) => void\n\t): void {\n\t\tsetTimeout(() => {\n\t\t\tconst startTime = performance.now();\n\t\t\tfunction frame(currentTime: number): void {\n\t\t\t\tconst elapsed = (currentTime - startTime) / 1000;\n\t\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\n\t\t\t\tlet y1, y2;\n\t\t\t\tif (progress < 0.5) {\n\t\t\t\t\tconst t = progress * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = startY1 + (midY1 - startY1) * localEased;\n\t\t\t\t\ty2 = startY2 + (midY2 - startY2) * localEased;\n\t\t\t\t} else {\n\t\t\t\t\tconst t = (progress - 0.5) * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = midY1 + (endY1 - midY1) * localEased;\n\t\t\t\t\ty2 = midY2 + (endY2 - midY2) * localEased;\n\t\t\t\t}\n\n\t\t\t\tcallback(y1, y2);\n\n\t\t\t\tif (progress < 1) {\n\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t} else {\n\t\t\t\t\tcallback(endY1, endY2);\n\t\t\t\t}\n\t\t\t}\n\t\t\trequestAnimationFrame(frame);\n\t\t}, delay * 1000);\n\t}\n\n\tfunction handleMouseEnter() {\n\t\t// hoverAnimate doubles as the in-flight flag: guard on it, not on the\n\t\t// animate union, or a parent holding animate=true would block the dots.\n\t\tif (hoverAnimate) return;\n\t\thoverAnimate = true;\n\n\t\tanimateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0.2, (y1, y2) => {\n\t\t\tline1Y1 = y1;\n\t\t\tline1Y2 = y2;\n\t\t});\n\n\t\tanimateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0.1, (y1, y2) => {\n\t\t\tline2Y1 = y1;\n\t\t\tline2Y2 = y2;\n\t\t});\n\n\t\tanimateLine(12, 12, 10.5, 13.5, 12, 12, 0.6, 0, (y1, y2) => {\n\t\t\tline3Y1 = y1;\n\t\t\tline3Y2 = y2;\n\t\t});\n\n\t\tresetTimer = setTimeout(() => {\n\t\t\thoverAnimate = false;\n\t\t}, 800);\n\t}\n\n\t// The dot animation is driven imperatively, so the prop has to trigger it\n\t// explicitly; the group rotation is CSS and follows the animate union.\n\t$effect(() => {\n\t\tif (animateProp) untrack(handleMouseEnter);\n\t});\n\n\t$effect(() => () => clearTimeout(resetTimer));\n</script>\n\n<div class={className} aria-label=\"message-circle-more\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"message-circle-more-icon\"\n\t>\n\t\t<g class=\"message-circle-more-group\" class:animate>\n\t\t\t<path d=\"M7.9 20A9 9 0 1 0 4 16.1L2 22Z\" />\n\t\t\t<line x1=\"16\" y1={line1Y1} x2=\"16\" y2={line1Y2} />\n\t\t\t<line x1=\"12\" y1={line2Y1} x2=\"12\" y2={line2Y2} />\n\t\t\t<line x1=\"8\" y1={line3Y1} x2=\"8\" y2={line3Y2} />\n\t\t</g>\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.message-circle-more-icon {\n\t\toverflow: visible;\n\t}\n\n\t.message-circle-more-group {\n\t\ttransform-origin: bottom left;\n\t}\n\n\t.message-circle-more-group.animate {\n\t\tanimation: groupRotation 0.8s ease-in-out;\n\t}\n\n\t@keyframes groupRotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t40% {\n\t\t\ttransform: rotate(8deg);\n\t\t}\n\t\t60% {\n\t\t\ttransform: rotate(-8deg);\n\t\t}\n\t\t80% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": []
diff --git a/static/r/message-square-more.json b/static/r/message-square-more.json
index 6819da63..e405d279 100644
--- a/static/r/message-square-more.json
+++ b/static/r/message-square-more.json
@@ -9,7 +9,7 @@
 		{
 			"type": "registry:component",
 			"target": "~/src/lib/components/movingicons/message-square-more.svelte",
-			"content": "<script lang=\"ts\">\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tlet resetTimer: ReturnType<typeof setTimeout> | undefined;\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet line1Y1 = $state(10);\n\tlet line1Y2 = $state(10);\n\tlet line2Y1 = $state(10);\n\tlet line2Y2 = $state(10);\n\tlet line3Y1 = $state(10);\n\tlet line3Y2 = $state(10);\n\n\tfunction easeInOut(t: number): number {\n\t\treturn t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;\n\t}\n\n\tfunction animateLine(\n\t\tstartY1: number,\n\t\tstartY2: number,\n\t\tmidY1: number,\n\t\tmidY2: number,\n\t\tendY1: number,\n\t\tendY2: number,\n\t\tduration: number,\n\t\tdelay: number,\n\t\tcallback: (y1: number, y2: number) => void\n\t): void {\n\t\tsetTimeout(() => {\n\t\t\tconst startTime = performance.now();\n\t\t\tfunction frame(currentTime: number): void {\n\t\t\t\tconst elapsed = (currentTime - startTime) / 1000;\n\t\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\n\t\t\t\tlet y1, y2;\n\t\t\t\tif (progress < 0.5) {\n\t\t\t\t\tconst t = progress * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = startY1 + (midY1 - startY1) * localEased;\n\t\t\t\t\ty2 = startY2 + (midY2 - startY2) * localEased;\n\t\t\t\t} else {\n\t\t\t\t\tconst t = (progress - 0.5) * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = midY1 + (endY1 - midY1) * localEased;\n\t\t\t\t\ty2 = midY2 + (endY2 - midY2) * localEased;\n\t\t\t\t}\n\n\t\t\t\tcallback(y1, y2);\n\n\t\t\t\tif (progress < 1) {\n\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t} else {\n\t\t\t\t\tcallback(endY1, endY2);\n\t\t\t\t}\n\t\t\t}\n\t\t\trequestAnimationFrame(frame);\n\t\t}, delay * 1000);\n\t}\n\n\tfunction handleMouseEnter() {\n\t\tif (animate) return;\n\t\thoverAnimate = true;\n\n\t\tanimateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.2, (y1, y2) => {\n\t\t\tline1Y1 = y1;\n\t\t\tline1Y2 = y2;\n\t\t});\n\n\t\tanimateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.1, (y1, y2) => {\n\t\t\tline2Y1 = y1;\n\t\t\tline2Y2 = y2;\n\t\t});\n\n\t\tanimateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0, (y1, y2) => {\n\t\t\tline3Y1 = y1;\n\t\t\tline3Y2 = y2;\n\t\t});\n\n\t\tresetTimer = setTimeout(() => {\n\t\t\thoverAnimate = false;\n\t\t}, 800);\n\t}\n\n\t$effect(() => () => clearTimeout(resetTimer));\n</script>\n\n<div class={className} aria-label=\"message-square-more\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"message-square-more-icon\"\n\t>\n\t\t<g class=\"message-square-more-group\" class:animate>\n\t\t\t<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />\n\t\t\t<line x1=\"16\" y1={line1Y1} x2=\"16\" y2={line1Y2} />\n\t\t\t<line x1=\"12\" y1={line2Y1} x2=\"12\" y2={line2Y2} />\n\t\t\t<line x1=\"8\" y1={line3Y1} x2=\"8\" y2={line3Y2} />\n\t\t</g>\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.message-square-more-icon {\n\t\toverflow: visible;\n\t}\n\n\t.message-square-more-group {\n\t\ttransform-origin: bottom left;\n\t}\n\n\t.message-square-more-group.animate {\n\t\tanimation: groupRotation 0.8s ease-in-out;\n\t}\n\n\t@keyframes groupRotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t40% {\n\t\t\ttransform: rotate(8deg);\n\t\t}\n\t\t60% {\n\t\t\ttransform: rotate(-8deg);\n\t\t}\n\t\t80% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\timport { untrack } from 'svelte';\n\tinterface IconProps {\n\t\tcolor?: string;\n\t\tsize?: number;\n\t\tstrokeWidth?: number;\n\t\tanimate?: boolean;\n\t\tclass?: string;\n\t}\n\n\tlet {\n\t\tcolor = 'currentColor',\n\t\tsize = 24,\n\t\tstrokeWidth = 2,\n\t\tanimate: animateProp = false,\n\t\tclass: className = ''\n\t}: IconProps = $props();\n\n\tlet hoverAnimate = $state(false);\n\tlet resetTimer: ReturnType<typeof setTimeout> | undefined;\n\tconst animate = $derived(animateProp || hoverAnimate);\n\n\tlet line1Y1 = $state(10);\n\tlet line1Y2 = $state(10);\n\tlet line2Y1 = $state(10);\n\tlet line2Y2 = $state(10);\n\tlet line3Y1 = $state(10);\n\tlet line3Y2 = $state(10);\n\n\tfunction easeInOut(t: number): number {\n\t\treturn t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;\n\t}\n\n\tfunction animateLine(\n\t\tstartY1: number,\n\t\tstartY2: number,\n\t\tmidY1: number,\n\t\tmidY2: number,\n\t\tendY1: number,\n\t\tendY2: number,\n\t\tduration: number,\n\t\tdelay: number,\n\t\tcallback: (y1: number, y2: number) => void\n\t): void {\n\t\tsetTimeout(() => {\n\t\t\tconst startTime = performance.now();\n\t\t\tfunction frame(currentTime: number): void {\n\t\t\t\tconst elapsed = (currentTime - startTime) / 1000;\n\t\t\t\tconst progress = Math.min(elapsed / duration, 1);\n\n\t\t\t\tlet y1, y2;\n\t\t\t\tif (progress < 0.5) {\n\t\t\t\t\tconst t = progress * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = startY1 + (midY1 - startY1) * localEased;\n\t\t\t\t\ty2 = startY2 + (midY2 - startY2) * localEased;\n\t\t\t\t} else {\n\t\t\t\t\tconst t = (progress - 0.5) * 2;\n\t\t\t\t\tconst localEased = easeInOut(t);\n\t\t\t\t\ty1 = midY1 + (endY1 - midY1) * localEased;\n\t\t\t\t\ty2 = midY2 + (endY2 - midY2) * localEased;\n\t\t\t\t}\n\n\t\t\t\tcallback(y1, y2);\n\n\t\t\t\tif (progress < 1) {\n\t\t\t\t\trequestAnimationFrame(frame);\n\t\t\t\t} else {\n\t\t\t\t\tcallback(endY1, endY2);\n\t\t\t\t}\n\t\t\t}\n\t\t\trequestAnimationFrame(frame);\n\t\t}, delay * 1000);\n\t}\n\n\tfunction handleMouseEnter() {\n\t\t// hoverAnimate doubles as the in-flight flag: guard on it, not on the\n\t\t// animate union, or a parent holding animate=true would block the dots.\n\t\tif (hoverAnimate) return;\n\t\thoverAnimate = true;\n\n\t\tanimateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.2, (y1, y2) => {\n\t\t\tline1Y1 = y1;\n\t\t\tline1Y2 = y2;\n\t\t});\n\n\t\tanimateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0.1, (y1, y2) => {\n\t\t\tline2Y1 = y1;\n\t\t\tline2Y2 = y2;\n\t\t});\n\n\t\tanimateLine(10, 10, 8.5, 11.5, 10, 10, 0.6, 0, (y1, y2) => {\n\t\t\tline3Y1 = y1;\n\t\t\tline3Y2 = y2;\n\t\t});\n\n\t\tresetTimer = setTimeout(() => {\n\t\t\thoverAnimate = false;\n\t\t}, 800);\n\t}\n\n\t// The dot animation is driven imperatively, so the prop has to trigger it\n\t// explicitly; the group rotation is CSS and follows the animate union.\n\t$effect(() => {\n\t\tif (animateProp) untrack(handleMouseEnter);\n\t});\n\n\t$effect(() => () => clearTimeout(resetTimer));\n</script>\n\n<div class={className} aria-label=\"message-square-more\" role=\"img\" onmouseenter={handleMouseEnter}>\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\twidth={size}\n\t\theight={size}\n\t\tviewBox=\"0 0 24 24\"\n\t\tfill=\"none\"\n\t\tstroke={color}\n\t\tstroke-width={strokeWidth}\n\t\tstroke-linecap=\"round\"\n\t\tstroke-linejoin=\"round\"\n\t\tclass=\"message-square-more-icon\"\n\t>\n\t\t<g class=\"message-square-more-group\" class:animate>\n\t\t\t<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />\n\t\t\t<line x1=\"16\" y1={line1Y1} x2=\"16\" y2={line1Y2} />\n\t\t\t<line x1=\"12\" y1={line2Y1} x2=\"12\" y2={line2Y2} />\n\t\t\t<line x1=\"8\" y1={line3Y1} x2=\"8\" y2={line3Y2} />\n\t\t</g>\n\t</svg>\n</div>\n\n<style>\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n\t.message-square-more-icon {\n\t\toverflow: visible;\n\t}\n\n\t.message-square-more-group {\n\t\ttransform-origin: bottom left;\n\t}\n\n\t.message-square-more-group.animate {\n\t\tanimation: groupRotation 0.8s ease-in-out;\n\t}\n\n\t@keyframes groupRotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t40% {\n\t\t\ttransform: rotate(8deg);\n\t\t}\n\t\t60% {\n\t\t\ttransform: rotate(-8deg);\n\t\t}\n\t\t80% {\n\t\t\ttransform: rotate(2deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": []