@joewinke/jatui 0.1.33 → 0.2.0

package/dist/showcase/generative/GenerativeBackdrop.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { loadManifest, assetPath } from './manifest.js';
+	import { recordIntent } from './intent.js';
+	import type { AssetManifest } from './types.js';
+
+	interface Props {
+		assetId: string;
+		baseUrl?: string;
+		overlay?: 'none' | 'scrim' | 'gradient';
+		class?: string;
+	}
+
+	let { assetId, baseUrl = '', overlay = 'none', class: className = '' }: Props = $props();
+
+	type Phase = 'loading' | 'procedural' | 'poster' | 'video';
+
+	let container: HTMLDivElement | undefined = $state();
+	let phase = $state<Phase>('loading');
+	let manifest = $state<AssetManifest | null>(null);
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let videoLoaded = $state(false);
+	let prefersReducedMotion = $state(false);
+
+	// Derived palette for procedural gradient
+	const palette = $derived(
+		manifest?.palette.length
+			? manifest.palette
+			: ['oklch(50% 0.2 240)', 'oklch(40% 0.15 270)', 'oklch(60% 0.25 210)']
+	);
+
+	const gradientStyle = $derived(
+		`background: linear-gradient(135deg, ${palette.map((c, i) => `${c} ${Math.round((i / Math.max(palette.length - 1, 1)) * 100)}%`).join(', ')});`
+	);
+
+	const activeHash = $derived(manifest?.active ?? '');
+	const basePath = $derived(manifest ? assetPath(assetId, activeHash, baseUrl) : '');
+
+	onMount(() => {
+		prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+		const onMqlChange = (e: MediaQueryListEvent) => {
+			prefersReducedMotion = e.matches;
+		};
+		mql.addEventListener('change', onMqlChange);
+
+		loadManifest(assetId, baseUrl).then((m) => {
+			manifest = m;
+			if (!m) {
+				// No manifest — record intent in DEV and go procedural
+				if (container) recordIntent(assetId, container);
+				phase = 'procedural';
+			} else {
+				phase = 'poster';
+				if (!prefersReducedMotion) {
+					scheduleVideoLoad();
+				}
+			}
+		});
+
+		return () => mql.removeEventListener('change', onMqlChange);
+	});
+
+	function scheduleVideoLoad() {
+		if (!container) return;
+		const obs = new IntersectionObserver(
+			(entries) => {
+				if (entries[0].isIntersecting) {
+					obs.disconnect();
+					phase = 'video';
+				}
+			},
+			{ threshold: 0.1 }
+		);
+		obs.observe(container);
+	}
+
+	// Pause video when scrolled offscreen
+	$effect(() => {
+		if (!videoEl || phase !== 'video') return;
+		const obs = new IntersectionObserver(
+			(entries) => {
+				if (!videoEl) return;
+				if (entries[0].isIntersecting) {
+					videoEl.play().catch(() => {});
+				} else {
+					videoEl.pause();
+				}
+			},
+			{ threshold: 0.1 }
+		);
+		obs.observe(videoEl);
+		return () => obs.disconnect();
+	});
+</script>
+
+<!--
+  GenerativeBackdrop — manifest-driven video/poster/procedural fallback chain.
+  Fallback order: CSS gradient (0ms) → poster img → lazy video (IntersectionObserver).
+  prefers-reduced-motion: stops at poster. Missing/failed manifest: procedural drift.
+-->
+<div
+	bind:this={container}
+	class="generative-backdrop {className}"
+	aria-hidden="true"
+>
+	<!-- Tier 1: CSS gradient (always visible as base, also the procedural fallback) -->
+	<div
+		class="gen-layer gen-gradient"
+		class:gen-animate={phase === 'procedural' && !prefersReducedMotion}
+		style={gradientStyle}
+	></div>
+
+	<!-- Tier 2: Poster image (avif with jpg fallback) -->
+	{#if phase === 'poster' || phase === 'video'}
+		<picture class="gen-layer">
+			<source srcset="{basePath}/poster.avif" type="image/avif" />
+			<img
+				src="{basePath}/poster.jpg"
+				alt=""
+				class="gen-img"
+				loading="eager"
+				decoding="async"
+			/>
+		</picture>
+	{/if}
+
+	<!-- Tier 3: Lazy video (only when intersecting + no reduced-motion) -->
+	{#if phase === 'video' && !prefersReducedMotion}
+		<video
+			bind:this={videoEl}
+			class="gen-layer gen-video"
+			class:gen-video-ready={videoLoaded}
+			muted
+			autoplay
+			loop
+			playsinline
+			poster="{basePath}/poster.jpg"
+			oncanplaythrough={() => (videoLoaded = true)}
+		>
+			<source src="{basePath}/clip.webm" type="video/webm" />
+			<source src="{basePath}/clip.mp4" type="video/mp4" />
+		</video>
+	{/if}
+
+	<!-- Overlay -->
+	{#if overlay !== 'none'}
+		<div
+			class="gen-layer gen-overlay"
+			class:gen-overlay-scrim={overlay === 'scrim'}
+			class:gen-overlay-gradient={overlay === 'gradient'}
+		></div>
+	{/if}
+</div>
+
+<style>
+	.generative-backdrop {
+		position: relative;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	.gen-layer {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Tier 1: gradient base */
+	.gen-gradient {
+		z-index: 0;
+		background-size: 200% 200%;
+		transition: background var(--motion-move, 300ms) var(--motion-glide, ease-out);
+	}
+
+	/* Procedural drift animation — ambient, showcase-only */
+	@keyframes gen-drift {
+		0% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
+		100% { background-position: 0% 50%; }
+	}
+
+	.gen-animate {
+		animation: gen-drift 12s var(--motion-glide, ease-in-out) infinite;
+		background-size: 300% 300%;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.gen-animate {
+			animation: none;
+		}
+	}
+
+	/* Tier 2: poster img */
+	.gen-img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		z-index: 1;
+	}
+
+	/* Tier 3: video */
+	.gen-video {
+		z-index: 2;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity var(--motion-enter, 200ms) var(--motion-glide, ease-out);
+	}
+
+	.gen-video-ready {
+		opacity: 1;
+	}
+
+	/* Overlay */
+	.gen-overlay {
+		z-index: 3;
+		pointer-events: none;
+	}
+
+	.gen-overlay-scrim {
+		background: oklch(0% 0 0 / 40%);
+	}
+
+	.gen-overlay-gradient {
+		background: linear-gradient(
+			to bottom,
+			oklch(0% 0 0 / 0%) 0%,
+			oklch(0% 0 0 / 60%) 100%
+		);
+	}
+</style>

package/dist/showcase/generative/GenerativeBackdrop.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    assetId: string;
+    baseUrl?: string;
+    overlay?: 'none' | 'scrim' | 'gradient';
+    class?: string;
+}
+declare const GenerativeBackdrop: import("svelte").Component<Props, {}, "">;
+type GenerativeBackdrop = ReturnType<typeof GenerativeBackdrop>;
+export default GenerativeBackdrop;

package/dist/showcase/generative/intent.d.ts

@@ -0,0 +1,7 @@
+export declare function quantizeRatio(w: number, h: number): string;
+/**
+ * In DEV mode: record that this assetId has no manifest yet.
+ * Writes to localStorage so the design-time CLI can harvest intents.
+ * No-ops in production or when localStorage is unavailable (SSR).
+ */
+export declare function recordIntent(assetId: string, el: HTMLElement): void;

package/dist/showcase/generative/intent.js

@@ -0,0 +1,67 @@
+var INTENTS_KEY = 'jatui-gen-intents';
+/**
+ * Standard ratio buckets, ordered widest to tallest.
+ * quantizeRatio maps a measured w×h to the nearest bucket.
+ */
+var RATIO_BUCKETS = [
+    { label: '21:9', value: 21 / 9 },
+    { label: '16:9', value: 16 / 9 },
+    { label: '3:2', value: 3 / 2 },
+    { label: '4:3', value: 4 / 3 },
+    { label: '1:1', value: 1 },
+    { label: '3:4', value: 3 / 4 },
+    { label: '9:16', value: 9 / 16 }
+];
+export function quantizeRatio(w, h) {
+    if (h === 0)
+        return '16:9';
+    var ratio = w / h;
+    var nearest = RATIO_BUCKETS[0];
+    var minDiff = Math.abs(ratio - nearest.value);
+    for (var _i = 0, RATIO_BUCKETS_1 = RATIO_BUCKETS; _i < RATIO_BUCKETS_1.length; _i++) {
+        var bucket = RATIO_BUCKETS_1[_i];
+        var diff = Math.abs(ratio - bucket.value);
+        if (diff < minDiff) {
+            minDiff = diff;
+            nearest = bucket;
+        }
+    }
+    return nearest.label;
+}
+/**
+ * In DEV mode: record that this assetId has no manifest yet.
+ * Writes to localStorage so the design-time CLI can harvest intents.
+ * No-ops in production or when localStorage is unavailable (SSR).
+ */
+export function recordIntent(assetId, el) {
+    var _a;
+    if (typeof import.meta === 'undefined')
+        return;
+    if (!((_a = import.meta.env) === null || _a === void 0 ? void 0 : _a.DEV))
+        return;
+    if (typeof localStorage === 'undefined')
+        return;
+    var rect = el.getBoundingClientRect();
+    var w = Math.round(rect.width) || el.offsetWidth;
+    var h = Math.round(rect.height) || el.offsetHeight;
+    var ratioBucket = quantizeRatio(w, h);
+    var intent = new Date().toISOString();
+    var existing = readIntents();
+    existing[assetId] = { assetId: assetId, measuredW: w, measuredH: h, ratioBucket: ratioBucket, intent: intent };
+    try {
+        localStorage.setItem(INTENTS_KEY, JSON.stringify(existing));
+    }
+    catch (_b) {
+        // localStorage full — silently skip
+    }
+    console.info("[jatui-gen] no manifest for \"".concat(assetId, "\" \u2014 intent recorded (").concat(w, "\u00D7").concat(h, ", ").concat(ratioBucket, "). Run: jatui-gen fulfill"));
+}
+function readIntents() {
+    try {
+        var raw = localStorage.getItem(INTENTS_KEY);
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch (_a) {
+        return {};
+    }
+}

package/dist/showcase/generative/manifest.d.ts

@@ -0,0 +1,9 @@
+import type { AssetManifest } from './types.js';
+/**
+ * Fetch and validate the asset manifest for a given assetId.
+ * Returns null if the manifest is missing or malformed.
+ * Results are memoised for the lifetime of the page.
+ */
+export declare function loadManifest(assetId: string, baseUrl?: string): Promise<AssetManifest | null>;
+/** Build the asset base path for a given assetId + hash. */
+export declare function assetPath(assetId: string, hash: string, baseUrl?: string): string;

package/dist/showcase/generative/manifest.js

@@ -0,0 +1,97 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var CACHE = new Map();
+/**
+ * Fetch and validate the asset manifest for a given assetId.
+ * Returns null if the manifest is missing or malformed.
+ * Results are memoised for the lifetime of the page.
+ */
+export function loadManifest(assetId_1) {
+    return __awaiter(this, arguments, Promise, function (assetId, baseUrl) {
+        var cacheKey, url, res, data, _a;
+        var _b;
+        if (baseUrl === void 0) { baseUrl = ''; }
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    cacheKey = "".concat(baseUrl, "/").concat(assetId);
+                    if (CACHE.has(cacheKey))
+                        return [2 /*return*/, (_b = CACHE.get(cacheKey)) !== null && _b !== void 0 ? _b : null];
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 4, , 5]);
+                    url = "".concat(baseUrl, "/gen/").concat(assetId, "/manifest.json");
+                    return [4 /*yield*/, fetch(url)];
+                case 2:
+                    res = _c.sent();
+                    if (!res.ok) {
+                        CACHE.set(cacheKey, null);
+                        return [2 /*return*/, null];
+                    }
+                    return [4 /*yield*/, res.json()];
+                case 3:
+                    data = _c.sent();
+                    if (!isValidManifest(data)) {
+                        CACHE.set(cacheKey, null);
+                        return [2 /*return*/, null];
+                    }
+                    CACHE.set(cacheKey, data);
+                    return [2 /*return*/, data];
+                case 4:
+                    _a = _c.sent();
+                    CACHE.set(cacheKey, null);
+                    return [2 /*return*/, null];
+                case 5: return [2 /*return*/];
+            }
+        });
+    });
+}
+function isValidManifest(data) {
+    if (!data || typeof data !== 'object')
+        return false;
+    var m = data;
+    return (typeof m.assetId === 'string' &&
+        typeof m.active === 'string' &&
+        Array.isArray(m.variants) &&
+        Array.isArray(m.palette) &&
+        m.palette.length > 0);
+}
+/** Build the asset base path for a given assetId + hash. */
+export function assetPath(assetId, hash, baseUrl) {
+    if (baseUrl === void 0) { baseUrl = ''; }
+    return "".concat(baseUrl, "/gen/").concat(assetId, "/").concat(hash);
+}

package/dist/showcase/generative/types.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Generative asset pipeline — manifest contract types.
+ *
+ * The manifest describes a versioned, hash-addressed cache of AI-generated
+ * video/poster assets for a given assetId. The runtime component reads this;
+ * a design-time CLI (sibling task) writes it. Zero API calls at runtime.
+ */
+export interface AssetVariant {
+    /** Nearest standard ratio bucket: 21:9|16:9|3:2|4:3|1:1|3:4|9:16 */
+    ratio: string;
+    /** Resolution label e.g. "1080p", "720p" */
+    res: string;
+    /** SHA-256 content hash (first 12 chars) — also the sub-directory name */
+    hash: string;
+}
+export interface AssetProvenance {
+    /** Model that generated the asset, e.g. "seedance-2-0" */
+    model: string;
+    /** Prompt used for generation */
+    prompt: string;
+    /** Random seed for reproducibility */
+    seed?: number;
+    /** ISO 8601 timestamp */
+    generatedAt: string;
+}
+/**
+ * Manifest stored at /gen/<assetId>/manifest.json.
+ * Asset files live at /gen/<assetId>/<hash>/{clip.mp4,clip.webm,poster.avif,poster.jpg}.
+ */
+export interface AssetManifest {
+    assetId: string;
+    /** Hash of the currently active variant (points into variants[]) */
+    active: string;
+    variants: AssetVariant[];
+    /** Theme-extracted palette for the procedural CSS gradient fallback */
+    palette: string[];
+    provenance: AssetProvenance;
+}
+/** Intent written to localStorage by dev-mode components with no manifest */
+export interface AssetIntent {
+    assetId: string;
+    measuredW: number;
+    measuredH: number;
+    /** Quantized ratio bucket */
+    ratioBucket: string;
+    /** ISO timestamp when the intent was recorded */
+    intent: string;
+}

package/dist/showcase/generative/types.js

@@ -0,0 +1,8 @@
+/**
+ * Generative asset pipeline — manifest contract types.
+ *
+ * The manifest describes a versioned, hash-addressed cache of AI-generated
+ * video/poster assets for a given assetId. The runtime component reads this;
+ * a design-time CLI (sibling task) writes it. Zero API calls at runtime.
+ */
+export {};

package/dist/showcase/index.d.ts

@@ -0,0 +1,36 @@
+export { default as BorderBeam } from './BorderBeam.svelte';
+export { default as AuroraDrift } from './AuroraDrift.svelte';
+export { default as ShineSweep } from './ShineSweep.svelte';
+export { default as CursorSpotlight } from './CursorSpotlight.svelte';
+export { default as ScrambleText } from './ScrambleText.svelte';
+export { default as TypewriterText } from './TypewriterText.svelte';
+export { default as TextSplitReveal } from './TextSplitReveal.svelte';
+export { default as TextWave } from './TextWave.svelte';
+export { default as Marquee } from './Marquee.svelte';
+export { default as FocusReveal } from './FocusReveal.svelte';
+export { default as ParallaxTilt } from './ParallaxTilt.svelte';
+export { default as FlipCard } from './FlipCard.svelte';
+export { default as Confetti } from './Confetti.svelte';
+export { default as ClipWipe } from './ClipWipe.svelte';
+export { default as KenBurns } from './KenBurns.svelte';
+export { default as DeviceMock } from './DeviceMock.svelte';
+export { default as AnimatedBeam } from './AnimatedBeam.svelte';
+export { default as Dock } from './Dock.svelte';
+export { default as Terminal } from './Terminal.svelte';
+export { default as BentoGrid } from './BentoGrid.svelte';
+export { default as BentoCard } from './BentoCard.svelte';
+export { default as ShowcaseBackdrop } from './backdrop/ShowcaseBackdrop.svelte';
+export { default as MeshGradient } from './backdrop/MeshGradient.svelte';
+export { default as GrainGradient } from './backdrop/GrainGradient.svelte';
+export { default as Metaballs } from './backdrop/Metaballs.svelte';
+export { default as NeuroNoise } from './backdrop/NeuroNoise.svelte';
+export { default as Globe } from './Globe.svelte';
+export { scrollReveal } from './scroll/scrollReveal';
+export type { ScrollRevealOptions } from './scroll/scrollReveal';
+export { scrollProgress } from './scroll/scrollProgress';
+export type { ScrollProgressOptions } from './scroll/scrollProgress';
+export { default as SmoothScroll } from './scroll/SmoothScroll.svelte';
+export { default as GenerativeBackdrop } from './generative/GenerativeBackdrop.svelte';
+export { loadManifest, assetPath } from './generative/manifest';
+export { quantizeRatio, recordIntent } from './generative/intent';
+export type { AssetManifest, AssetVariant, AssetProvenance, AssetIntent } from './generative/types';

package/dist/showcase/index.js

@@ -0,0 +1,46 @@
+// Showcase module — marketing-surface kinetics effects.
+// SANCTIONED ONLY on marketing/landing pages (outside product routes).
+// See shared/craft/animation-discipline.md "Surfaces" for policy.
+// Consumer repos enforce the boundary with scripts/check-showcase-imports.mjs.
+//
+// Import via the subpath: import { BorderBeam } from '@joewinke/jatui/showcase'
+// Ambient effects (kinetics wave)
+export { default as BorderBeam } from './BorderBeam.svelte';
+export { default as AuroraDrift } from './AuroraDrift.svelte';
+export { default as ShineSweep } from './ShineSweep.svelte';
+export { default as CursorSpotlight } from './CursorSpotlight.svelte';
+// Text effects
+export { default as ScrambleText } from './ScrambleText.svelte';
+export { default as TypewriterText } from './TypewriterText.svelte';
+export { default as TextSplitReveal } from './TextSplitReveal.svelte';
+export { default as TextWave } from './TextWave.svelte';
+export { default as Marquee } from './Marquee.svelte';
+export { default as FocusReveal } from './FocusReveal.svelte';
+// Flair
+export { default as ParallaxTilt } from './ParallaxTilt.svelte';
+export { default as FlipCard } from './FlipCard.svelte';
+export { default as Confetti } from './Confetti.svelte';
+export { default as ClipWipe } from './ClipWipe.svelte';
+export { default as KenBurns } from './KenBurns.svelte';
+// Magic UI ports
+export { default as DeviceMock } from './DeviceMock.svelte';
+export { default as AnimatedBeam } from './AnimatedBeam.svelte';
+export { default as Dock } from './Dock.svelte';
+export { default as Terminal } from './Terminal.svelte';
+export { default as BentoGrid } from './BentoGrid.svelte';
+export { default as BentoCard } from './BentoCard.svelte';
+// WebGL backdrops (@paper-design/shaders + cobe)
+export { default as ShowcaseBackdrop } from './backdrop/ShowcaseBackdrop.svelte';
+export { default as MeshGradient } from './backdrop/MeshGradient.svelte';
+export { default as GrainGradient } from './backdrop/GrainGradient.svelte';
+export { default as Metaballs } from './backdrop/Metaballs.svelte';
+export { default as NeuroNoise } from './backdrop/NeuroNoise.svelte';
+export { default as Globe } from './Globe.svelte';
+// Scroll kit (marketing surfaces only)
+export { scrollReveal } from './scroll/scrollReveal';
+export { scrollProgress } from './scroll/scrollProgress';
+export { default as SmoothScroll } from './scroll/SmoothScroll.svelte';
+// Generative asset pipeline (runtime half; see scripts/jatui-gen for the CLI)
+export { default as GenerativeBackdrop } from './generative/GenerativeBackdrop.svelte';
+export { loadManifest, assetPath } from './generative/manifest';
+export { quantizeRatio, recordIntent } from './generative/intent';

package/dist/showcase/scroll/SmoothScroll.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import Lenis from 'lenis';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		children: import('svelte').Snippet;
+		/** Lenis lerp intensity — lower = smoother (default 0.1) */
+		lerp?: number;
+		/** Lenis scroll duration in seconds (overrides lerp when set) */
+		duration?: number;
+		/** Lenis smooth-wheel toggle (default true) */
+		smoothWheel?: boolean;
+	}
+
+	let { children, lerp = 0.1, duration, smoothWheel = true }: Props = $props();
+
+	const isTouch =
+		typeof navigator !== 'undefined' && navigator.maxTouchPoints > 0;
+	const reducedMotion =
+		typeof window !== 'undefined' &&
+		window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+	// Never run on touch devices or reduced-motion — scroll-hijack is hostile there.
+	const enabled = !isTouch && !reducedMotion;
+
+	onMount(() => {
+		if (!enabled) return;
+
+		const opts: ConstructorParameters<typeof Lenis>[0] = { smoothWheel };
+		if (duration != null) opts.duration = duration;
+		else opts.lerp = lerp;
+
+		const lenis = new Lenis(opts);
+
+		let rafId: number;
+		function raf(time: number) {
+			lenis.raf(time);
+			rafId = requestAnimationFrame(raf);
+		}
+		rafId = requestAnimationFrame(raf);
+
+		return () => {
+			cancelAnimationFrame(rafId);
+			lenis.destroy();
+		};
+	});
+</script>
+
+{@render children()}

package/dist/showcase/scroll/SmoothScroll.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    children: import('svelte').Snippet;
+    /** Lenis lerp intensity — lower = smoother (default 0.1) */
+    lerp?: number;
+    /** Lenis scroll duration in seconds (overrides lerp when set) */
+    duration?: number;
+    /** Lenis smooth-wheel toggle (default true) */
+    smoothWheel?: boolean;
+}
+declare const SmoothScroll: import("svelte").Component<Props, {}, "">;
+type SmoothScroll = ReturnType<typeof SmoothScroll>;
+export default SmoothScroll;

package/dist/showcase/scroll/scrollProgress.d.ts

@@ -0,0 +1,24 @@
+export interface ScrollProgressOptions {
+    /** CSS variable name to bind (default '--scroll-progress') */
+    varName?: string;
+    /** Container to observe — default window scroll */
+    container?: HTMLElement;
+    /** Scroll axis (default 'y') */
+    axis?: 'x' | 'y';
+}
+/**
+ * Svelte action: binds a CSS custom property (default --scroll-progress, 0..1)
+ * to the page scroll position via motion scroll(). Uses native ScrollTimeline
+ * where available for compositor-thread performance.
+ *
+ * Reduced-motion: no-ops (leaves var unset / at whatever CSS default).
+ *
+ * Usage:
+ *   <div use:scrollProgress style="width: calc(var(--scroll-progress) * 100%)">
+ *   <div use:scrollProgress={{ varName: '--depth', container: panelEl }}>
+ */
+export declare function scrollProgress(node: HTMLElement, opts?: ScrollProgressOptions): {
+    destroy?: undefined;
+} | {
+    destroy(): void;
+};