diff --git a/src/lib/components/docs/pages/ScrollVelocityDemo.svelte b/src/lib/components/docs/pages/ScrollVelocityDemo.svelte
new file mode 100644
index 0000000..7519114
--- /dev/null
+++ b/src/lib/components/docs/pages/ScrollVelocityDemo.svelte
@@ -0,0 +1,201 @@
+<script lang="ts">
+	import TabsLayout from '$lib/components/docs/preview/TabsLayout.svelte';
+	import Customize from '$lib/components/docs/preview/Customize.svelte';
+	import PreviewSlider from '$lib/components/docs/preview/PreviewSlider.svelte';
+	import PropTable, { type PropRow } from '$lib/components/docs/preview/PropTable.svelte';
+	import DemoCodeTab from '$lib/components/docs/preview/DemoCodeTab.svelte';
+	import ReplayButton from '$lib/components/docs/preview/ReplayButton.svelte';
+	import ScrollVelocity from '$lib/components/library/TextAnimations/ScrollVelocity/ScrollVelocity.svelte';
+	import source from '$lib/components/library/TextAnimations/ScrollVelocity/ScrollVelocity.svelte?raw';
+
+	const DEFAULTS = {
+		velocity: 100,
+		numCopies: 6,
+		damping: 50,
+		stiffness: 400
+	};
+
+	let velocity = $state(DEFAULTS.velocity);
+	let numCopies = $state(DEFAULTS.numCopies);
+	let damping = $state(DEFAULTS.damping);
+	let stiffness = $state(DEFAULTS.stiffness);
+	let replay = $state(0);
+
+	const hasChanges = $derived(
+		velocity !== DEFAULTS.velocity ||
+			numCopies !== DEFAULTS.numCopies ||
+			damping !== DEFAULTS.damping ||
+			stiffness !== DEFAULTS.stiffness
+	);
+
+	function reset() {
+		velocity = DEFAULTS.velocity;
+		numCopies = DEFAULTS.numCopies;
+		damping = DEFAULTS.damping;
+		stiffness = DEFAULTS.stiffness;
+		replay++;
+	}
+
+	const usage = $derived(`<ScrollVelocity
+  texts={['Svelte Bits', 'Scroll Down']}
+  velocity={${velocity}}
+  numCopies={${numCopies}}
+  damping={${damping}}
+  stiffness={${stiffness}}
+/>`);
+
+	const props: PropRow[] = [
+		{
+			name: 'scrollContainer',
+			type: 'HTMLElement | null',
+			default: 'null',
+			description: 'Optional custom scroll container to track. Defaults to window.'
+		},
+		{
+			name: 'texts',
+			type: 'string[]',
+			default: '[]',
+			description: 'Array of strings to render as scrolling rows. Odd-indexed rows scroll in the opposite direction.'
+		},
+		{
+			name: 'velocity',
+			type: 'number',
+			default: '100',
+			description: 'Base scrolling velocity in px per second. Sign flips for odd-indexed rows.'
+		},
+		{
+			name: 'class',
+			type: 'string',
+			default: '""',
+			description: 'CSS class applied to each text copy span.'
+		},
+		{
+			name: 'damping',
+			type: 'number',
+			default: '50',
+			description: 'Damping coefficient for the spring smoothing scroll velocity.'
+		},
+		{
+			name: 'stiffness',
+			type: 'number',
+			default: '400',
+			description: 'Stiffness coefficient for the spring smoothing scroll velocity.'
+		},
+		{
+			name: 'numCopies',
+			type: 'number',
+			default: '6',
+			description: 'Number of text copies rendered in each row for a continuous loop.'
+		},
+		{
+			name: 'velocityMapping',
+			type: '{ input: [number, number]; output: [number, number] }',
+			default: '{ input: [0, 1000], output: [0, 5] }',
+			description: 'Linear mapping from scroll velocity to motion multiplier.'
+		},
+		{
+			name: 'parallaxClass',
+			type: 'string',
+			default: '"parallax"',
+			description: 'CSS class for the parallax container of each row.'
+		},
+		{
+			name: 'scrollerClass',
+			type: 'string',
+			default: '"scroller"',
+			description: 'CSS class for the inner scroller div of each row.'
+		},
+		{
+			name: 'parallaxStyle',
+			type: 'string',
+			default: '""',
+			description: 'Inline style applied to each parallax container.'
+		},
+		{
+			name: 'scrollerStyle',
+			type: 'string',
+			default: '""',
+			description: 'Inline style applied to each scroller div.'
+		}
+	];
+</script>
+
+<svelte:head><title>Scroll Velocity - svelte-bits</title></svelte:head>
+
+<h1 class="sub-category">Scroll Velocity</h1>
+
+<TabsLayout onreset={reset} {hasChanges} componentName="ScrollVelocity" {usage} {source} {props}>
+	{#snippet preview()}
+		<div
+			class="demo-container relative flex w-full items-center justify-center overflow-hidden"
+			style="height:400px;padding:0;"
+		>
+			<ReplayButton onClick={() => replay++} />
+			{#key replay}
+				<div class="w-full">
+					<ScrollVelocity
+						texts={['Svelte Bits', 'Scroll Down']}
+						{velocity}
+						{numCopies}
+						{damping}
+						{stiffness}
+					/>
+				</div>
+			{/key}
+		</div>
+	{/snippet}
+	{#snippet code()}
+		<DemoCodeTab slug="scroll-velocity" {usage} {source} />
+	{/snippet}
+	{#snippet customize()}
+		<Customize>
+			<PreviewSlider
+				title="Velocity"
+				min={10}
+				max={500}
+				step={10}
+				value={velocity}
+				onChange={(v) => {
+					velocity = v;
+					replay++;
+				}}
+			/>
+			<PreviewSlider
+				title="Num Copies"
+				min={2}
+				max={12}
+				step={1}
+				value={numCopies}
+				onChange={(v) => {
+					numCopies = v;
+					replay++;
+				}}
+			/>
+			<PreviewSlider
+				title="Damping"
+				min={10}
+				max={100}
+				step={5}
+				value={damping}
+				onChange={(v) => {
+					damping = v;
+					replay++;
+				}}
+			/>
+			<PreviewSlider
+				title="Stiffness"
+				min={100}
+				max={800}
+				step={50}
+				value={stiffness}
+				onChange={(v) => {
+					stiffness = v;
+					replay++;
+				}}
+			/>
+		</Customize>
+	{/snippet}
+	{#snippet propTable()}
+		<PropTable rows={props} />
+	{/snippet}
+</TabsLayout>
diff --git a/src/lib/components/docs/pages/demoRegistry.ts b/src/lib/components/docs/pages/demoRegistry.ts
index 8fde416..b69d810 100644
--- a/src/lib/components/docs/pages/demoRegistry.ts
+++ b/src/lib/components/docs/pages/demoRegistry.ts
@@ -136,4 +136,5 @@ export const DOC_PAGE_REGISTRY: Record<string, DemoLoader> = {
 	'rotating-text': () => import('./RotatingTextDemo.svelte'),
 	'scroll-reveal': () => import('./ScrollRevealDemo.svelte'),
 	'ascii-text': () => import('./ASCIITextDemo.svelte'),
+	'scroll-velocity': () => import('./ScrollVelocityDemo.svelte'),
 };
diff --git a/src/lib/components/library/TextAnimations/ScrollVelocity/ScrollVelocity.svelte b/src/lib/components/library/TextAnimations/ScrollVelocity/ScrollVelocity.svelte
new file mode 100644
index 0000000..e0a1160
--- /dev/null
+++ b/src/lib/components/library/TextAnimations/ScrollVelocity/ScrollVelocity.svelte
@@ -0,0 +1,157 @@
+<!-- @svelte-bits
+{
+  "title": "Scroll Velocity",
+  "description": "Multi-row marquee that scrolls horizontally at a base velocity and accelerates with spring-smoothed page-scroll movement.",
+  "dependencies": []
+}
+-->
+<script lang="ts">
+	type VelocityMapping = { input: [number, number]; output: [number, number] };
+
+	type Props = {
+		scrollContainer?: HTMLElement | null;
+		texts?: string[];
+		velocity?: number;
+		class?: string;
+		damping?: number;
+		stiffness?: number;
+		numCopies?: number;
+		velocityMapping?: VelocityMapping;
+		parallaxClass?: string;
+		scrollerClass?: string;
+		parallaxStyle?: string;
+		scrollerStyle?: string;
+	};
+
+	let {
+		scrollContainer = null,
+		texts = [],
+		velocity = 100,
+		class: className = '',
+		damping = 50,
+		stiffness = 400,
+		numCopies = 6,
+		velocityMapping = { input: [0, 1000], output: [0, 5] },
+		parallaxClass = 'parallax',
+		scrollerClass = 'scroller',
+		parallaxStyle = '',
+		scrollerStyle = ''
+	}: Props = $props();
+
+	let copyEls: (HTMLSpanElement | undefined)[] = $state([]);
+	let scrollerEls: (HTMLDivElement | undefined)[] = $state([]);
+
+	function wrap(min: number, max: number, v: number): number {
+		const range = max - min;
+		const mod = (((v - min) % range) + range) % range;
+		return mod + min;
+	}
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+
+		const target: HTMLElement | Window = scrollContainer ?? window;
+		const getScrollY = () =>
+			target === window
+				? window.scrollY || window.pageYOffset || 0
+				: (target as HTMLElement).scrollTop;
+
+		const count = texts.length;
+		const baseX = new Array(count).fill(0);
+		const directionFactors = new Array(count).fill(1);
+
+		let prevScrollY = getScrollY();
+		let smoothVelocity = 0;
+		let springVel = 0;
+		let lastTime = performance.now();
+
+		const [iMin, iMax] = velocityMapping?.input ?? [0, 1000];
+		const [oMin, oMax] = velocityMapping?.output ?? [0, 5];
+		const inputSpan = iMax - iMin || 1;
+
+		let raf = 0;
+		const tick = (t: number) => {
+			const dtRaw = (t - lastTime) / 1000;
+			const dt = Math.min(dtRaw, 0.05);
+			lastTime = t;
+
+			const sy = getScrollY();
+			const scrollVelocity = dtRaw > 0 ? (sy - prevScrollY) / dtRaw : 0;
+			prevScrollY = sy;
+
+			const accel = stiffness * (scrollVelocity - smoothVelocity) - damping * springVel;
+			springVel += accel * dt;
+			smoothVelocity += springVel * dt;
+
+			const velocityFactor = ((smoothVelocity - iMin) / inputSpan) * (oMax - oMin) + oMin;
+
+			for (let i = 0; i < count; i++) {
+				const baseVelocity = i % 2 !== 0 ? -velocity : velocity;
+				let moveBy = directionFactors[i] * baseVelocity * dt;
+
+				if (velocityFactor < 0) directionFactors[i] = -1;
+				else if (velocityFactor > 0) directionFactors[i] = 1;
+
+				moveBy += directionFactors[i] * moveBy * velocityFactor;
+				baseX[i] += moveBy;
+
+				const copy = copyEls[i];
+				const scroller = scrollerEls[i];
+				if (!copy || !scroller) continue;
+
+				const copyWidth = copy.offsetWidth;
+				if (copyWidth > 0) {
+					const x = wrap(-copyWidth, 0, baseX[i]);
+					scroller.style.transform = `translate3d(${x}px, 0, 0)`;
+				}
+			}
+
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+
+		return () => cancelAnimationFrame(raf);
+	});
+</script>
+
+<section>
+	{#each texts as text, i (i)}
+		<div class={parallaxClass} style={parallaxStyle}>
+			<div bind:this={scrollerEls[i]} class={scrollerClass} style={scrollerStyle}>
+				{#each Array.from({ length: Math.max(numCopies, 1) }, (_, j) => j) as j (j)}
+					{#if j === 0}
+						<span bind:this={copyEls[i]} class={className}>{text}&nbsp;</span>
+					{:else}
+						<span class={className}>{text}&nbsp;</span>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/each}
+</section>
+
+<style>
+	section :global(.parallax) {
+		position: relative;
+		overflow: hidden;
+	}
+	section :global(.scroller) {
+		display: flex;
+		white-space: nowrap;
+		text-align: center;
+		font-family: sans-serif;
+		font-size: 2.25rem;
+		font-weight: bold;
+		letter-spacing: -0.02em;
+		filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+	}
+	section :global(.scroller span) {
+		flex-shrink: 0;
+	}
+	@media (min-width: 768px) {
+		section :global(.scroller) {
+			font-size: 5rem;
+			line-height: 5rem;
+		}
+	}
+</style>
diff --git a/src/lib/constants/categories.ts b/src/lib/constants/categories.ts
index ac60360..ac38359 100644
--- a/src/lib/constants/categories.ts
+++ b/src/lib/constants/categories.ts
@@ -307,6 +307,7 @@ export const IMPLEMENTED_DEMOS = new Set<string>([
 	'rotating-text',
 	'scroll-reveal',
 	'ascii-text',
+	'scroll-velocity',
 ]);
 
 // Helper: is this subcategory label fully ported?
diff --git a/static/r/curved-loop.json b/static/r/curved-loop.json
index df352cf..1a74257 100644
--- a/static/r/curved-loop.json
+++ b/static/r/curved-loop.json
@@ -9,7 +9,7 @@
 			"type": "registry:component",
 			"path": "CurvedLoop.svelte",
 			"target": "$lib/components/svelte-bits/CurvedLoop.svelte",
-			"content": "<script lang=\"ts\">\n\ttype Direction = 'left' | 'right';\n\n\ttype Props = {\n\t\tmarqueeText?: string;\n\t\tspeed?: number;\n\t\tclass?: string;\n\t\tcurveAmount?: number;\n\t\tdirection?: Direction;\n\t\tinteractive?: boolean;\n\t};\n\n\tlet {\n\t\tmarqueeText = '',\n\t\tspeed = 2,\n\t\tclass: className = '',\n\t\tcurveAmount = 400,\n\t\tdirection = 'left',\n\t\tinteractive = true\n\t}: Props = $props();\n\n\tconst text = $derived.by(() => {\n\t\tconst hasTrailing = /\\s| $/.test(marqueeText);\n\t\treturn (hasTrailing ? marqueeText.replace(/\\s+$/, '') : marqueeText) + ' ';\n\t});\n\n\tlet measureEl: SVGTextElement | undefined = $state();\n\tlet textPathEl: SVGTextPathElement | undefined = $state();\n\tlet spacing = $state(0);\n\tlet offset = $state(0);\n\tlet isDragging = $state(false);\n\n\tconst uid = $props.id();\n\tconst pathId = `curve-${uid}`;\n\tconst pathD = $derived(`M-100,40 Q500,${40 + curveAmount} 1540,40`);\n\n\tlet dragActive = false;\n\tlet lastX = 0;\n\tlet velX = 0;\n\tlet dirInternal: Direction = direction;\n\n\t$effect(() => {\n\t\tdirInternal = direction;\n\t});\n\n\tconst totalText = $derived.by(() => {\n\t\tconst len = spacing;\n\t\tif (!len) return text;\n\t\treturn Array(Math.ceil(1800 / len) + 2)\n\t\t\t.fill(text)\n\t\t\t.join('');\n\t});\n\tconst ready = $derived(spacing > 0);\n\n\t$effect(() => {\n\t\tvoid text;\n\t\tvoid className;\n\t\tif (measureEl) {\n\t\t\tspacing = measureEl.getComputedTextLength();\n\t\t}\n\t});\n\n\t$effect(() => {\n\t\tif (!spacing) return;\n\t\tif (textPathEl) {\n\t\t\tconst initial = -spacing;\n\t\t\ttextPathEl.setAttribute('startOffset', initial + 'px');\n\t\t\toffset = initial;\n\t\t}\n\t});\n\n\t$effect(() => {\n\t\tif (!spacing || !ready) return;\n\t\tvoid speed;\n\t\tlet frame = 0;\n\t\tconst step = () => {\n\t\t\tif (!dragActive && textPathEl) {\n\t\t\t\tconst delta = dirInternal === 'right' ? speed : -speed;\n\t\t\t\tconst currentOffset = parseFloat(textPathEl.getAttribute('startOffset') || '0');\n\t\t\t\tlet newOffset = currentOffset + delta;\n\n\t\t\t\tconst wrapPoint = spacing;\n\t\t\t\tif (newOffset <= -wrapPoint) newOffset += wrapPoint;\n\t\t\t\tif (newOffset > 0) newOffset -= wrapPoint;\n\n\t\t\t\ttextPathEl.setAttribute('startOffset', newOffset + 'px');\n\t\t\t\toffset = newOffset;\n\t\t\t}\n\t\t\tframe = requestAnimationFrame(step);\n\t\t};\n\t\tframe = requestAnimationFrame(step);\n\t\treturn () => cancelAnimationFrame(frame);\n\t});\n\n\tfunction onPointerDown(e: PointerEvent) {\n\t\tif (!interactive) return;\n\t\tdragActive = true;\n\t\tisDragging = true;\n\t\tlastX = e.clientX;\n\t\tvelX = 0;\n\t\t(e.target as Element)?.setPointerCapture?.(e.pointerId);\n\t}\n\n\tfunction onPointerMove(e: PointerEvent) {\n\t\tif (!interactive || !dragActive || !textPathEl) return;\n\t\tconst dx = e.clientX - lastX;\n\t\tlastX = e.clientX;\n\t\tvelX = dx;\n\n\t\tconst currentOffset = parseFloat(textPathEl.getAttribute('startOffset') || '0');\n\t\tlet newOffset = currentOffset + dx;\n\n\t\tconst wrapPoint = spacing;\n\t\tif (newOffset <= -wrapPoint) newOffset += wrapPoint;\n\t\tif (newOffset > 0) newOffset -= wrapPoint;\n\n\t\ttextPathEl.setAttribute('startOffset', newOffset + 'px');\n\t\toffset = newOffset;\n\t}\n\n\tfunction endDrag() {\n\t\tif (!interactive) return;\n\t\tdragActive = false;\n\t\tisDragging = false;\n\t\tdirInternal = velX > 0 ? 'right' : 'left';\n\t}\n\n\tconst cursorStyle = $derived(interactive ? (isDragging ? 'grabbing' : 'grab') : 'auto');\n</script>\n\n<div\n\tclass=\"curved-loop-jacket\"\n\tstyle:visibility={ready ? 'visible' : 'hidden'}\n\tstyle:cursor={cursorStyle}\n\tonpointerdown={onPointerDown}\n\tonpointermove={onPointerMove}\n\tonpointerup={endDrag}\n\tonpointerleave={endDrag}\n>\n\t<svg class=\"curved-loop-svg\" viewBox=\"0 0 1440 120\">\n\t\t<text\n\t\t\tbind:this={measureEl}\n\t\t\txml:space=\"preserve\"\n\t\t\tstyle=\"visibility:hidden;opacity:0;pointer-events:none;\"\n\t\t>{text}</text>\n\t\t<defs>\n\t\t\t<path id={pathId} d={pathD} fill=\"none\" stroke=\"transparent\" />\n\t\t</defs>\n\t\t{#if ready}\n\t\t\t<text font-weight=\"bold\" xml:space=\"preserve\" class={className}>\n\t\t\t\t<textPath\n\t\t\t\t\tbind:this={textPathEl}\n\t\t\t\t\thref={`#${pathId}`}\n\t\t\t\t\tstartOffset={offset + 'px'}\n\t\t\t\t\txml:space=\"preserve\">{totalText}</textPath>\n\t\t\t</text>\n\t\t{/if}\n\t</svg>\n</div>\n\n<style>\n\t.curved-loop-jacket {\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t.curved-loop-svg {\n\t\tuser-select: none;\n\t\twidth: 100%;\n\t\taspect-ratio: 100 / 12;\n\t\toverflow: visible;\n\t\tdisplay: block;\n\t\tfont-size: 6rem;\n\t\tfill: #ffffff;\n\t\t-moz-user-select: none;\n\t\t-webkit-user-select: none;\n\t\tfont-weight: 700;\n\t\ttext-transform: uppercase;\n\t\tline-height: 1;\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\ttype Direction = 'left' | 'right';\n\n\ttype Props = {\n\t\tmarqueeText?: string;\n\t\tspeed?: number;\n\t\tclass?: string;\n\t\tcurveAmount?: number;\n\t\tdirection?: Direction;\n\t\tinteractive?: boolean;\n\t};\n\n\tlet {\n\t\tmarqueeText = '',\n\t\tspeed = 2,\n\t\tclass: className = '',\n\t\tcurveAmount = 400,\n\t\tdirection = 'left',\n\t\tinteractive = true\n\t}: Props = $props();\n\n\tconst text = $derived.by(() => {\n\t\tconst hasTrailing = /\\s|\\u00A0$/.test(marqueeText);\n\t\treturn (hasTrailing ? marqueeText.replace(/\\s+$/, '') : marqueeText) + ' ';\n\t});\n\n\tlet measureEl: SVGTextElement | undefined = $state();\n\tlet textPathEl: SVGTextPathElement | undefined = $state();\n\tlet spacing = $state(0);\n\tlet offset = $state(0);\n\tlet isDragging = $state(false);\n\n\tconst uid = $props.id();\n\tconst pathId = `curve-${uid}`;\n\tconst pathD = $derived(`M-100,40 Q500,${40 + curveAmount} 1540,40`);\n\n\tlet dragActive = false;\n\tlet lastX = 0;\n\tlet velX = 0;\n\t// svelte-ignore state_referenced_locally\n\tlet dirInternal: Direction = direction;\n\n\t$effect(() => {\n\t\tdirInternal = direction;\n\t});\n\n\tconst totalText = $derived.by(() => {\n\t\tconst len = spacing;\n\t\tif (!len) return text;\n\t\treturn Array(Math.ceil(1800 / len) + 2)\n\t\t\t.fill(text)\n\t\t\t.join('');\n\t});\n\tconst ready = $derived(spacing > 0);\n\n\t$effect(() => {\n\t\tvoid text;\n\t\tvoid className;\n\t\tif (measureEl) {\n\t\t\tspacing = measureEl.getComputedTextLength();\n\t\t}\n\t});\n\n\t$effect(() => {\n\t\tif (!spacing) return;\n\t\tif (textPathEl) {\n\t\t\tconst initial = -spacing;\n\t\t\ttextPathEl.setAttribute('startOffset', initial + 'px');\n\t\t\toffset = initial;\n\t\t}\n\t});\n\n\t$effect(() => {\n\t\tif (!spacing || !ready) return;\n\t\tvoid speed;\n\t\tlet frame = 0;\n\t\tconst step = () => {\n\t\t\tif (!dragActive && textPathEl) {\n\t\t\t\tconst delta = dirInternal === 'right' ? speed : -speed;\n\t\t\t\tconst currentOffset = parseFloat(textPathEl.getAttribute('startOffset') || '0');\n\t\t\t\tlet newOffset = currentOffset + delta;\n\n\t\t\t\tconst wrapPoint = spacing;\n\t\t\t\tif (newOffset <= -wrapPoint) newOffset += wrapPoint;\n\t\t\t\tif (newOffset > 0) newOffset -= wrapPoint;\n\n\t\t\t\ttextPathEl.setAttribute('startOffset', newOffset + 'px');\n\t\t\t\toffset = newOffset;\n\t\t\t}\n\t\t\tframe = requestAnimationFrame(step);\n\t\t};\n\t\tframe = requestAnimationFrame(step);\n\t\treturn () => cancelAnimationFrame(frame);\n\t});\n\n\tfunction onPointerDown(e: PointerEvent) {\n\t\tif (!interactive) return;\n\t\tdragActive = true;\n\t\tisDragging = true;\n\t\tlastX = e.clientX;\n\t\tvelX = 0;\n\t\t(e.target as Element)?.setPointerCapture?.(e.pointerId);\n\t}\n\n\tfunction onPointerMove(e: PointerEvent) {\n\t\tif (!interactive || !dragActive || !textPathEl) return;\n\t\tconst dx = e.clientX - lastX;\n\t\tlastX = e.clientX;\n\t\tvelX = dx;\n\n\t\tconst currentOffset = parseFloat(textPathEl.getAttribute('startOffset') || '0');\n\t\tlet newOffset = currentOffset + dx;\n\n\t\tconst wrapPoint = spacing;\n\t\tif (newOffset <= -wrapPoint) newOffset += wrapPoint;\n\t\tif (newOffset > 0) newOffset -= wrapPoint;\n\n\t\ttextPathEl.setAttribute('startOffset', newOffset + 'px');\n\t\toffset = newOffset;\n\t}\n\n\tfunction endDrag() {\n\t\tif (!interactive) return;\n\t\tdragActive = false;\n\t\tisDragging = false;\n\t\tdirInternal = velX > 0 ? 'right' : 'left';\n\t}\n\n\tconst cursorStyle = $derived(interactive ? (isDragging ? 'grabbing' : 'grab') : 'auto');\n</script>\n\n<!-- svelte-ignore a11y_no_static_element_interactions -->\n<div\n\tclass=\"curved-loop-jacket\"\n\tstyle:visibility={ready ? 'visible' : 'hidden'}\n\tstyle:cursor={cursorStyle}\n\tonpointerdown={onPointerDown}\n\tonpointermove={onPointerMove}\n\tonpointerup={endDrag}\n\tonpointerleave={endDrag}\n>\n\t<svg class=\"curved-loop-svg\" viewBox=\"0 0 1440 120\">\n\t\t<text\n\t\t\tbind:this={measureEl}\n\t\t\txml:space=\"preserve\"\n\t\t\tstyle=\"visibility:hidden;opacity:0;pointer-events:none;\"\n\t\t>{text}</text>\n\t\t<defs>\n\t\t\t<path id={pathId} d={pathD} fill=\"none\" stroke=\"transparent\" />\n\t\t</defs>\n\t\t{#if ready}\n\t\t\t<text font-weight=\"bold\" xml:space=\"preserve\" class={className}>\n\t\t\t\t<textPath\n\t\t\t\t\tbind:this={textPathEl}\n\t\t\t\t\thref={`#${pathId}`}\n\t\t\t\t\tstartOffset={offset + 'px'}\n\t\t\t\t\txml:space=\"preserve\">{totalText}</textPath>\n\t\t\t</text>\n\t\t{/if}\n\t</svg>\n</div>\n\n<style>\n\t.curved-loop-jacket {\n\t\tmin-height: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t.curved-loop-svg {\n\t\tuser-select: none;\n\t\twidth: 100%;\n\t\taspect-ratio: 100 / 12;\n\t\toverflow: visible;\n\t\tdisplay: block;\n\t\tfont-size: 6rem;\n\t\tfill: #ffffff;\n\t\t-moz-user-select: none;\n\t\t-webkit-user-select: none;\n\t\tfont-weight: 700;\n\t\ttext-transform: uppercase;\n\t\tline-height: 1;\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": [],
diff --git a/static/r/registry.json b/static/r/registry.json
index e450096..87c0032 100644
--- a/static/r/registry.json
+++ b/static/r/registry.json
@@ -1906,6 +1906,21 @@
 				}
 			]
 		},
+		{
+			"name": "decrypted-text",
+			"title": "Decrypted Text",
+			"description": "Scrambled-character reveal effect that decrypts a string on hover, click, or scroll-into-view, with sequential or random iteration modes.",
+			"type": "registry:component",
+			"dependencies": [],
+			"registryDependencies": [],
+			"files": [
+				{
+					"type": "registry:component",
+					"path": "DecryptedText.svelte",
+					"target": "$lib/components/svelte-bits/DecryptedText.svelte"
+				}
+			]
+		},
 		{
 			"name": "falling-text",
 			"title": "Falling Text",
@@ -2044,6 +2059,21 @@
 				}
 			]
 		},
+		{
+			"name": "scroll-velocity",
+			"title": "Scroll Velocity",
+			"description": "Multi-row marquee that scrolls horizontally at a base velocity and accelerates with spring-smoothed page-scroll movement.",
+			"type": "registry:component",
+			"dependencies": [],
+			"registryDependencies": [],
+			"files": [
+				{
+					"type": "registry:component",
+					"path": "ScrollVelocity.svelte",
+					"target": "$lib/components/svelte-bits/ScrollVelocity.svelte"
+				}
+			]
+		},
 		{
 			"name": "shiny-text",
 			"title": "Shiny Text",
diff --git a/static/r/scroll-velocity.json b/static/r/scroll-velocity.json
new file mode 100644
index 0000000..4b5aa89
--- /dev/null
+++ b/static/r/scroll-velocity.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
+	"name": "scroll-velocity",
+	"title": "Scroll Velocity",
+	"description": "Multi-row marquee that scrolls horizontally at a base velocity and accelerates with spring-smoothed page-scroll movement.",
+	"type": "registry:component",
+	"files": [
+		{
+			"type": "registry:component",
+			"path": "ScrollVelocity.svelte",
+			"target": "$lib/components/svelte-bits/ScrollVelocity.svelte",
+			"content": "<script lang=\"ts\">\n\ttype VelocityMapping = { input: [number, number]; output: [number, number] };\n\n\ttype Props = {\n\t\tscrollContainer?: HTMLElement | null;\n\t\ttexts?: string[];\n\t\tvelocity?: number;\n\t\tclass?: string;\n\t\tdamping?: number;\n\t\tstiffness?: number;\n\t\tnumCopies?: number;\n\t\tvelocityMapping?: VelocityMapping;\n\t\tparallaxClass?: string;\n\t\tscrollerClass?: string;\n\t\tparallaxStyle?: string;\n\t\tscrollerStyle?: string;\n\t};\n\n\tlet {\n\t\tscrollContainer = null,\n\t\ttexts = [],\n\t\tvelocity = 100,\n\t\tclass: className = '',\n\t\tdamping = 50,\n\t\tstiffness = 400,\n\t\tnumCopies = 6,\n\t\tvelocityMapping = { input: [0, 1000], output: [0, 5] },\n\t\tparallaxClass = 'parallax',\n\t\tscrollerClass = 'scroller',\n\t\tparallaxStyle = '',\n\t\tscrollerStyle = ''\n\t}: Props = $props();\n\n\tlet copyEls: (HTMLSpanElement | undefined)[] = $state([]);\n\tlet scrollerEls: (HTMLDivElement | undefined)[] = $state([]);\n\n\tfunction wrap(min: number, max: number, v: number): number {\n\t\tconst range = max - min;\n\t\tconst mod = (((v - min) % range) + range) % range;\n\t\treturn mod + min;\n\t}\n\n\t$effect(() => {\n\t\tif (typeof window === 'undefined') return;\n\n\t\tconst target: HTMLElement | Window = scrollContainer ?? window;\n\t\tconst getScrollY = () =>\n\t\t\ttarget === window\n\t\t\t\t? window.scrollY || window.pageYOffset || 0\n\t\t\t\t: (target as HTMLElement).scrollTop;\n\n\t\tconst count = texts.length;\n\t\tconst baseX = new Array(count).fill(0);\n\t\tconst directionFactors = new Array(count).fill(1);\n\n\t\tlet prevScrollY = getScrollY();\n\t\tlet smoothVelocity = 0;\n\t\tlet springVel = 0;\n\t\tlet lastTime = performance.now();\n\n\t\tconst [iMin, iMax] = velocityMapping?.input ?? [0, 1000];\n\t\tconst [oMin, oMax] = velocityMapping?.output ?? [0, 5];\n\t\tconst inputSpan = iMax - iMin || 1;\n\n\t\tlet raf = 0;\n\t\tconst tick = (t: number) => {\n\t\t\tconst dtRaw = (t - lastTime) / 1000;\n\t\t\tconst dt = Math.min(dtRaw, 0.05);\n\t\t\tlastTime = t;\n\n\t\t\tconst sy = getScrollY();\n\t\t\tconst scrollVelocity = dtRaw > 0 ? (sy - prevScrollY) / dtRaw : 0;\n\t\t\tprevScrollY = sy;\n\n\t\t\tconst accel = stiffness * (scrollVelocity - smoothVelocity) - damping * springVel;\n\t\t\tspringVel += accel * dt;\n\t\t\tsmoothVelocity += springVel * dt;\n\n\t\t\tconst velocityFactor = ((smoothVelocity - iMin) / inputSpan) * (oMax - oMin) + oMin;\n\n\t\t\tfor (let i = 0; i < count; i++) {\n\t\t\t\tconst baseVelocity = i % 2 !== 0 ? -velocity : velocity;\n\t\t\t\tlet moveBy = directionFactors[i] * baseVelocity * dt;\n\n\t\t\t\tif (velocityFactor < 0) directionFactors[i] = -1;\n\t\t\t\telse if (velocityFactor > 0) directionFactors[i] = 1;\n\n\t\t\t\tmoveBy += directionFactors[i] * moveBy * velocityFactor;\n\t\t\t\tbaseX[i] += moveBy;\n\n\t\t\t\tconst copy = copyEls[i];\n\t\t\t\tconst scroller = scrollerEls[i];\n\t\t\t\tif (!copy || !scroller) continue;\n\n\t\t\t\tconst copyWidth = copy.offsetWidth;\n\t\t\t\tif (copyWidth > 0) {\n\t\t\t\t\tconst x = wrap(-copyWidth, 0, baseX[i]);\n\t\t\t\t\tscroller.style.transform = `translate3d(${x}px, 0, 0)`;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\traf = requestAnimationFrame(tick);\n\t\t};\n\t\traf = requestAnimationFrame(tick);\n\n\t\treturn () => cancelAnimationFrame(raf);\n\t});\n</script>\n\n<section>\n\t{#each texts as text, i (i)}\n\t\t<div class={parallaxClass} style={parallaxStyle}>\n\t\t\t<div bind:this={scrollerEls[i]} class={scrollerClass} style={scrollerStyle}>\n\t\t\t\t{#each Array.from({ length: Math.max(numCopies, 1) }, (_, j) => j) as j (j)}\n\t\t\t\t\t{#if j === 0}\n\t\t\t\t\t\t<span bind:this={copyEls[i]} class={className}>{text}&nbsp;</span>\n\t\t\t\t\t{:else}\n\t\t\t\t\t\t<span class={className}>{text}&nbsp;</span>\n\t\t\t\t\t{/if}\n\t\t\t\t{/each}\n\t\t\t</div>\n\t\t</div>\n\t{/each}\n</section>\n\n<style>\n\tsection :global(.parallax) {\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\tsection :global(.scroller) {\n\t\tdisplay: flex;\n\t\twhite-space: nowrap;\n\t\ttext-align: center;\n\t\tfont-family: sans-serif;\n\t\tfont-size: 2.25rem;\n\t\tfont-weight: bold;\n\t\tletter-spacing: -0.02em;\n\t\tfilter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));\n\t}\n\tsection :global(.scroller span) {\n\t\tflex-shrink: 0;\n\t}\n\t@media (min-width: 768px) {\n\t\tsection :global(.scroller) {\n\t\t\tfont-size: 5rem;\n\t\t\tline-height: 5rem;\n\t\t}\n\t}\n</style>\n"
+		}
+	],
+	"registryDependencies": [],
+	"dependencies": []
+}
\ No newline at end of file
diff --git a/static/r/text-pressure.json b/static/r/text-pressure.json
index 065a2f3..ae813b4 100644
--- a/static/r/text-pressure.json
+++ b/static/r/text-pressure.json
@@ -9,7 +9,7 @@
 			"type": "registry:component",
 			"path": "TextPressure.svelte",
 			"target": "$lib/components/svelte-bits/TextPressure.svelte",
-			"content": "<script lang=\"ts\">\n\ttype Props = {\n\t\ttext?: string;\n\t\tfontFamily?: string;\n\t\tfontUrl?: string;\n\t\twidth?: boolean;\n\t\tweight?: boolean;\n\t\titalic?: boolean;\n\t\talpha?: boolean;\n\t\tflex?: boolean;\n\t\tstroke?: boolean;\n\t\tscale?: boolean;\n\t\ttextColor?: string;\n\t\tstrokeColor?: string;\n\t\tclass?: string;\n\t\tminFontSize?: number;\n\t};\n\n\tlet {\n\t\ttext = 'Compressa',\n\t\tfontFamily = 'Compressa VF',\n\t\tfontUrl = 'https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2',\n\t\twidth = true,\n\t\tweight = true,\n\t\titalic = true,\n\t\talpha = false,\n\t\tflex = true,\n\t\tstroke = false,\n\t\tscale = false,\n\t\ttextColor = '#FFFFFF',\n\t\tstrokeColor = '#FF0000',\n\t\tclass: className = '',\n\t\tminFontSize = 24\n\t}: Props = $props();\n\n\tlet containerEl: HTMLDivElement | undefined = $state();\n\tlet titleEl: HTMLHeadingElement | undefined = $state();\n\tlet spans: (HTMLSpanElement | null)[] = [];\n\n\tlet fontSize = $state(minFontSize);\n\tlet scaleY = $state(1);\n\tlet lineHeight = $state(1);\n\n\tconst chars = $derived(text.split(''));\n\n\t$effect(() => {\n\t\tconst mouse = { x: 0, y: 0 };\n\t\tconst cursor = { x: 0, y: 0 };\n\n\t\tconst handleMouseMove = (e: MouseEvent) => {\n\t\t\tcursor.x = e.clientX;\n\t\t\tcursor.y = e.clientY;\n\t\t};\n\t\tconst handleTouchMove = (e: TouchEvent) => {\n\t\t\tconst t = e.touches[0];\n\t\t\tif (!t) return;\n\t\t\tcursor.x = t.clientX;\n\t\t\tcursor.y = t.clientY;\n\t\t};\n\n\t\twindow.addEventListener('mousemove', handleMouseMove);\n\t\twindow.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n\t\tif (containerEl) {\n\t\t\tconst { left, top, width: w, height: h } = containerEl.getBoundingClientRect();\n\t\t\tmouse.x = left + w / 2;\n\t\t\tmouse.y = top + h / 2;\n\t\t\tcursor.x = mouse.x;\n\t\t\tcursor.y = mouse.y;\n\t\t}\n\n\t\tconst dist = (a: { x: number; y: number }, b: { x: number; y: number }) => {\n\t\t\tconst dx = b.x - a.x;\n\t\t\tconst dy = b.y - a.y;\n\t\t\treturn Math.sqrt(dx * dx + dy * dy);\n\t\t};\n\n\t\tconst getAttr = (distance: number, maxDist: number, minVal: number, maxVal: number) => {\n\t\t\tconst val = maxVal - Math.abs((maxVal * distance) / maxDist);\n\t\t\treturn Math.max(minVal, val + minVal);\n\t\t};\n\n\t\tlet rafId = 0;\n\t\tconst animate = () => {\n\t\t\tmouse.x += (cursor.x - mouse.x) / 15;\n\t\t\tmouse.y += (cursor.y - mouse.y) / 15;\n\n\t\t\tif (titleEl) {\n\t\t\t\tconst titleRect = titleEl.getBoundingClientRect();\n\t\t\t\tconst maxDist = titleRect.width / 2;\n\n\t\t\t\tspans.forEach((span) => {\n\t\t\t\t\tif (!span) return;\n\t\t\t\t\tconst rect = span.getBoundingClientRect();\n\t\t\t\t\tconst charCenter = {\n\t\t\t\t\t\tx: rect.x + rect.width / 2,\n\t\t\t\t\t\ty: rect.y + rect.height / 2\n\t\t\t\t\t};\n\t\t\t\t\tconst d = dist(mouse, charCenter);\n\n\t\t\t\t\tconst wdth = width ? Math.floor(getAttr(d, maxDist, 5, 200)) : 100;\n\t\t\t\t\tconst wght = weight ? Math.floor(getAttr(d, maxDist, 100, 900)) : 400;\n\t\t\t\t\tconst italVal = italic ? getAttr(d, maxDist, 0, 1).toFixed(2) : '0';\n\t\t\t\t\tconst alphaVal = alpha ? getAttr(d, maxDist, 0, 1).toFixed(2) : '1';\n\n\t\t\t\t\tconst newFontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`;\n\t\t\t\t\tif (span.style.fontVariationSettings !== newFontVariationSettings) {\n\t\t\t\t\t\tspan.style.fontVariationSettings = newFontVariationSettings;\n\t\t\t\t\t}\n\t\t\t\t\tif (alpha && span.style.opacity !== alphaVal) {\n\t\t\t\t\t\tspan.style.opacity = alphaVal;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\trafId = requestAnimationFrame(animate);\n\t\t};\n\t\trafId = requestAnimationFrame(animate);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('touchmove', handleTouchMove);\n\t\t\tcancelAnimationFrame(rafId);\n\t\t};\n\t});\n\n\t$effect(() => {\n\t\tvoid chars.length;\n\t\tvoid minFontSize;\n\t\tvoid scale;\n\n\t\tlet timeoutId: ReturnType<typeof setTimeout> | undefined;\n\t\tconst setSize = () => {\n\t\t\tif (!containerEl || !titleEl) return;\n\t\t\tconst { width: containerW, height: containerH } = containerEl.getBoundingClientRect();\n\t\t\tlet newFontSize = containerW / (chars.length / 2);\n\t\t\tnewFontSize = Math.max(newFontSize, minFontSize);\n\t\t\tfontSize = newFontSize;\n\t\t\tscaleY = 1;\n\t\t\tlineHeight = 1;\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (!titleEl) return;\n\t\t\t\tconst textRect = titleEl.getBoundingClientRect();\n\t\t\t\tif (scale && textRect.height > 0) {\n\t\t\t\t\tconst yRatio = containerH / textRect.height;\n\t\t\t\t\tscaleY = yRatio;\n\t\t\t\t\tlineHeight = yRatio;\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst debounced = () => {\n\t\t\tif (timeoutId) clearTimeout(timeoutId);\n\t\t\ttimeoutId = setTimeout(setSize, 100);\n\t\t};\n\n\t\tsetSize();\n\t\twindow.addEventListener('resize', debounced);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', debounced);\n\t\t\tif (timeoutId) clearTimeout(timeoutId);\n\t\t};\n\t});\n</script>\n\n<div bind:this={containerEl} class=\"text-pressure-container\">\n\t<h1\n\t\tbind:this={titleEl}\n\t\tclass=\"text-pressure-title {className} {flex ? 'flex-layout' : ''} {stroke ? 'has-stroke' : ''}\"\n\t\tstyle=\"font-family:{fontFamily};font-size:{fontSize}px;line-height:{lineHeight};transform:scale(1, {scaleY});color:{textColor};--text-pressure-stroke:{strokeColor};\"\n\t>\n\t\t{#each chars as char, i (i)}\n\t\t\t<span\n\t\t\t\tbind:this={spans[i]}\n\t\t\t\tdata-char={char}\n\t\t\t\tstyle=\"display:inline-block;color:{stroke ? 'inherit' : textColor};\"\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t</span>\n\t\t{/each}\n\t</h1>\n</div>\n\n<style>\n\t@font-face {\n\t\tfont-family: 'Compressa VF';\n\t\tsrc: url('https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2');\n\t\tfont-style: normal;\n\t}\n\n\t.text-pressure-container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t}\n\n\t.text-pressure-title {\n\t\ttext-transform: uppercase;\n\t\ttransform-origin: center top;\n\t\tmargin: 0;\n\t\ttext-align: center;\n\t\tuser-select: none;\n\t\twhite-space: nowrap;\n\t\tfont-weight: 100;\n\t\twidth: 100%;\n\t}\n\n\t.text-pressure-title.flex-layout {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.text-pressure-title.has-stroke span {\n\t\tposition: relative;\n\t}\n\n\t.text-pressure-title.has-stroke span::after {\n\t\tcontent: attr(data-char);\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tcolor: transparent;\n\t\tz-index: -1;\n\t\t-webkit-text-stroke-width: 3px;\n\t\t-webkit-text-stroke-color: var(--text-pressure-stroke, #ff0000);\n\t}\n</style>\n"
+			"content": "<script lang=\"ts\">\n\ttype Props = {\n\t\ttext?: string;\n\t\tfontFamily?: string;\n\t\tfontUrl?: string;\n\t\twidth?: boolean;\n\t\tweight?: boolean;\n\t\titalic?: boolean;\n\t\talpha?: boolean;\n\t\tflex?: boolean;\n\t\tstroke?: boolean;\n\t\tscale?: boolean;\n\t\ttextColor?: string;\n\t\tstrokeColor?: string;\n\t\tclass?: string;\n\t\tminFontSize?: number;\n\t};\n\n\tlet {\n\t\ttext = 'Compressa',\n\t\tfontFamily = 'Compressa VF',\n\t\tfontUrl = 'https://res.cloudinary.com/dr6lvwubh/raw/upload/v1529908256/CompressaPRO-GX.woff2',\n\t\twidth = true,\n\t\tweight = true,\n\t\titalic = true,\n\t\talpha = false,\n\t\tflex = true,\n\t\tstroke = false,\n\t\tscale = false,\n\t\ttextColor = '#FFFFFF',\n\t\tstrokeColor = '#FF0000',\n\t\tclass: className = '',\n\t\tminFontSize = 24\n\t}: Props = $props();\n\n\tlet containerEl: HTMLDivElement | undefined = $state();\n\tlet titleEl: HTMLHeadingElement | undefined = $state();\n\tlet spans: (HTMLSpanElement | null)[] = [];\n\n\t// svelte-ignore state_referenced_locally\n\tlet fontSize = $state(minFontSize);\n\tlet scaleY = $state(1);\n\tlet lineHeight = $state(1);\n\n\tconst chars = $derived(text.split(''));\n\n\t$effect(() => {\n\t\tif (typeof document === 'undefined') return;\n\t\ttry {\n\t\t\tconst face = new FontFace(fontFamily, `url(${fontUrl})`);\n\t\t\tface.load().then((loaded) => document.fonts.add(loaded)).catch(() => {});\n\t\t} catch {\n\t\t\t// FontFace unsupported — silently skip; the fallback family kicks in.\n\t\t}\n\t});\n\n\t$effect(() => {\n\t\tconst mouse = { x: 0, y: 0 };\n\t\tconst cursor = { x: 0, y: 0 };\n\n\t\tconst handleMouseMove = (e: MouseEvent) => {\n\t\t\tcursor.x = e.clientX;\n\t\t\tcursor.y = e.clientY;\n\t\t};\n\t\tconst handleTouchMove = (e: TouchEvent) => {\n\t\t\tconst t = e.touches[0];\n\t\t\tif (!t) return;\n\t\t\tcursor.x = t.clientX;\n\t\t\tcursor.y = t.clientY;\n\t\t};\n\n\t\twindow.addEventListener('mousemove', handleMouseMove);\n\t\twindow.addEventListener('touchmove', handleTouchMove, { passive: true });\n\n\t\tif (containerEl) {\n\t\t\tconst { left, top, width: w, height: h } = containerEl.getBoundingClientRect();\n\t\t\tmouse.x = left + w / 2;\n\t\t\tmouse.y = top + h / 2;\n\t\t\tcursor.x = mouse.x;\n\t\t\tcursor.y = mouse.y;\n\t\t}\n\n\t\tconst dist = (a: { x: number; y: number }, b: { x: number; y: number }) => {\n\t\t\tconst dx = b.x - a.x;\n\t\t\tconst dy = b.y - a.y;\n\t\t\treturn Math.sqrt(dx * dx + dy * dy);\n\t\t};\n\n\t\tconst getAttr = (distance: number, maxDist: number, minVal: number, maxVal: number) => {\n\t\t\tconst val = maxVal - Math.abs((maxVal * distance) / maxDist);\n\t\t\treturn Math.max(minVal, val + minVal);\n\t\t};\n\n\t\tlet rafId = 0;\n\t\tconst animate = () => {\n\t\t\tmouse.x += (cursor.x - mouse.x) / 15;\n\t\t\tmouse.y += (cursor.y - mouse.y) / 15;\n\n\t\t\tif (titleEl) {\n\t\t\t\tconst titleRect = titleEl.getBoundingClientRect();\n\t\t\t\tconst maxDist = titleRect.width / 2;\n\n\t\t\t\tspans.forEach((span) => {\n\t\t\t\t\tif (!span) return;\n\t\t\t\t\tconst rect = span.getBoundingClientRect();\n\t\t\t\t\tconst charCenter = {\n\t\t\t\t\t\tx: rect.x + rect.width / 2,\n\t\t\t\t\t\ty: rect.y + rect.height / 2\n\t\t\t\t\t};\n\t\t\t\t\tconst d = dist(mouse, charCenter);\n\n\t\t\t\t\tconst wdth = width ? Math.floor(getAttr(d, maxDist, 5, 200)) : 100;\n\t\t\t\t\tconst wght = weight ? Math.floor(getAttr(d, maxDist, 100, 900)) : 400;\n\t\t\t\t\tconst italVal = italic ? getAttr(d, maxDist, 0, 1).toFixed(2) : '0';\n\t\t\t\t\tconst alphaVal = alpha ? getAttr(d, maxDist, 0, 1).toFixed(2) : '1';\n\n\t\t\t\t\tconst newFontVariationSettings = `'wght' ${wght}, 'wdth' ${wdth}, 'ital' ${italVal}`;\n\t\t\t\t\tif (span.style.fontVariationSettings !== newFontVariationSettings) {\n\t\t\t\t\t\tspan.style.fontVariationSettings = newFontVariationSettings;\n\t\t\t\t\t}\n\t\t\t\t\tif (alpha && span.style.opacity !== alphaVal) {\n\t\t\t\t\t\tspan.style.opacity = alphaVal;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\trafId = requestAnimationFrame(animate);\n\t\t};\n\t\trafId = requestAnimationFrame(animate);\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('mousemove', handleMouseMove);\n\t\t\twindow.removeEventListener('touchmove', handleTouchMove);\n\t\t\tcancelAnimationFrame(rafId);\n\t\t};\n\t});\n\n\t$effect(() => {\n\t\tvoid chars.length;\n\t\tvoid minFontSize;\n\t\tvoid scale;\n\n\t\tlet timeoutId: ReturnType<typeof setTimeout> | undefined;\n\t\tconst setSize = () => {\n\t\t\tif (!containerEl || !titleEl) return;\n\t\t\tconst { width: containerW, height: containerH } = containerEl.getBoundingClientRect();\n\t\t\tlet newFontSize = containerW / (chars.length / 2);\n\t\t\tnewFontSize = Math.max(newFontSize, minFontSize);\n\t\t\tfontSize = newFontSize;\n\t\t\tscaleY = 1;\n\t\t\tlineHeight = 1;\n\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (!titleEl) return;\n\t\t\t\tconst textRect = titleEl.getBoundingClientRect();\n\t\t\t\tif (scale && textRect.height > 0) {\n\t\t\t\t\tconst yRatio = containerH / textRect.height;\n\t\t\t\t\tscaleY = yRatio;\n\t\t\t\t\tlineHeight = yRatio;\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst debounced = () => {\n\t\t\tif (timeoutId) clearTimeout(timeoutId);\n\t\t\ttimeoutId = setTimeout(setSize, 100);\n\t\t};\n\n\t\tsetSize();\n\t\twindow.addEventListener('resize', debounced);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', debounced);\n\t\t\tif (timeoutId) clearTimeout(timeoutId);\n\t\t};\n\t});\n</script>\n\n<div bind:this={containerEl} class=\"text-pressure-container\">\n\t<h1\n\t\tbind:this={titleEl}\n\t\tclass=\"text-pressure-title {className} {flex ? 'flex-layout' : ''} {stroke ? 'has-stroke' : ''}\"\n\t\tstyle=\"font-family:{fontFamily};font-size:{fontSize}px;line-height:{lineHeight};transform:scale(1, {scaleY});color:{textColor};--text-pressure-stroke:{strokeColor};\"\n\t>\n\t\t{#each chars as char, i (i)}\n\t\t\t<span\n\t\t\t\tbind:this={spans[i]}\n\t\t\t\tdata-char={char}\n\t\t\t\tstyle=\"display:inline-block;color:{stroke ? 'inherit' : textColor};\"\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t</span>\n\t\t{/each}\n\t</h1>\n</div>\n\n<style>\n\t.text-pressure-container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: transparent;\n\t}\n\n\t.text-pressure-title {\n\t\ttext-transform: uppercase;\n\t\ttransform-origin: center top;\n\t\tmargin: 0;\n\t\ttext-align: center;\n\t\tuser-select: none;\n\t\twhite-space: nowrap;\n\t\tfont-weight: 100;\n\t\twidth: 100%;\n\t}\n\n\t.text-pressure-title.flex-layout {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.text-pressure-title.has-stroke span {\n\t\tposition: relative;\n\t}\n\n\t.text-pressure-title.has-stroke span::after {\n\t\tcontent: attr(data-char);\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\tcolor: transparent;\n\t\tz-index: -1;\n\t\t-webkit-text-stroke-width: 3px;\n\t\t-webkit-text-stroke-color: var(--text-pressure-stroke, #ff0000);\n\t}\n</style>\n"
 		}
 	],
 	"registryDependencies": [],