use-scroll-animate 9.3.0 → 9.4.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [9.4.0] - 2026-10-09
+
+### Added
+- **Video motion — `motionary/fx/video`** (= `motionary/components/fx-video`, `registerVideoPack()`, also in `registerEffectPacks()` and the marketplace): `scrubVideo(video, trigger?)` (scroll-driven video, eased `currentTime`), `frameSequence(canvas, { count, src | draw }, trigger?)` (Apple-style image sequences scrubbed by scroll, preloaded), `scrollProgress(el)`. Effects `film-burn` (enter) and `jump-cut` (attention).
+- **2 new components (9.4)** in `motionary/components/widgets`:
+  - `<usa-video-card>` — hover / focus plays a muted preview with a progress line, play badge and duration chip (`duration` or read from the video); poster Ken Burns drift when there is no playable video; click / Enter → `usa:open` { src }; `previewing`.
+  - `<usa-hero-video>` — full-bleed hero: poster (`poster`, `<img>` or gradient) cross-fades to the background video when it can play, scrim, always-present pause / play button, `scrub` for a scroll-driven video, poster drift when no video; `paused`, `toggle()`; `usa:play` / `usa:pause`.
+- Showcase: 3 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- The hero always offers a labelled pause / play button for moving video (WCAG 2.2.2) and is a labelled `region`; background videos are muted and `aria-hidden`. The video card is a focusable button labelled "Play <title>". Reduced motion: no autoplay or preview (poster only), scrubbing shows the first frame, `film-burn` fades, `jump-cut` does nothing.
+
 ## [9.3.0] - 2026-10-09
 
 ### Added

package/dist/components/fx-video.cjs

@@ -0,0 +1,111 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+var base = require('../chunks/base-DoRUZBy-.cjs');
+
+/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
+function scrollProgress(el) {
+    const r = el.getBoundingClientRect();
+    const vh = (typeof innerHeight === 'number' && innerHeight) || 1;
+    return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));
+}
+/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
+function scrubVideo(video, trigger = video, opts = {}) {
+    video.pause();
+    if (base.prefersReducedMotion())
+        return () => undefined;
+    const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));
+    let cur = 0;
+    return base.onFrame(() => {
+        const d = video.duration;
+        if (!d || !Number.isFinite(d))
+            return;
+        const target = scrollProgress(trigger) * d;
+        cur += (target - cur) * k;
+        if (Math.abs(video.currentTime - cur) > 1 / 60)
+            video.currentTime = cur;
+    });
+}
+/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
+function frameSequence(canvas, seq, trigger = canvas) {
+    const ctx = canvas.getContext?.('2d');
+    const n = Math.max(1, Math.floor(seq.count));
+    const imgs = [];
+    if (seq.src && typeof Image !== 'undefined')
+        for (let i = 0; i < n; i++) {
+            const im = new Image();
+            im.decoding = 'async';
+            im.src = seq.src(i);
+            imgs.push(im);
+        }
+    let last = -1;
+    const paint = (i) => {
+        if (!ctx || i === last)
+            return;
+        const w = canvas.width;
+        const h = canvas.height;
+        if (seq.draw) {
+            ctx.clearRect(0, 0, w, h);
+            seq.draw(ctx, i, w, h);
+            last = i;
+        }
+        else if (imgs[i]?.complete && imgs[i].naturalWidth) {
+            const im = imgs[i];
+            const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);
+            ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);
+            last = i;
+        }
+    };
+    paint(0);
+    if (base.prefersReducedMotion())
+        return () => undefined;
+    return base.onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));
+}
+const VIDEO_FX = [
+    {
+        name: 'film-burn',
+        kind: 'enter',
+        description: 'A warm light leak burns across as the element appears (`color`).',
+        defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const leak = document.createElement('span');
+            leak.setAttribute('aria-hidden', 'true');
+            Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });
+            el.appendChild(leak);
+            ctx.onCleanup(() => leak.remove());
+            const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });
+            const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });
+            const end = () => leak.remove();
+            return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);
+        },
+    },
+    {
+        name: 'jump-cut',
+        kind: 'attention',
+        description: 'Two hard cuts (zoom, reframe) and back, like an edit.',
+        defaults: { duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register film-burn and jump-cut (9.4). */
+function registerVideoPack() {
+    registry.registerEffects(VIDEO_FX);
+}
+
+exports.VIDEO_FX = VIDEO_FX;
+exports.frameSequence = frameSequence;
+exports.registerVideoPack = registerVideoPack;
+exports.scrollProgress = scrollProgress;
+exports.scrubVideo = scrubVideo;
+//# sourceMappingURL=fx-video.cjs.map

package/dist/components/fx-video.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-video.cjs","sources":["../../src/components/fx2/video.ts"],"sourcesContent":["/**\n * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):\n *\n * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`\n *   follows the scroll progress of `trigger` (default the video) through the\n *   viewport, eased. Returns a stop function.\n * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style\n *   image sequence scrubbed by scroll: frame `i` is the image `src(i)`\n *   (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.\n * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves\n *   at the top.\n *\n * Effects: `film-burn` (enter) — a warm light leak burns across as the\n * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)\n * and back, like an edit. Reduced motion: scrubbing shows the first frame,\n * film-burn fades, jump-cut does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { onFrame, prefersReducedMotion } from '../base';\n\n/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */\nexport function scrollProgress(el: Element): number {\n  const r = el.getBoundingClientRect();\n  const vh = (typeof innerHeight === 'number' && innerHeight) || 1;\n  return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));\n}\n\n/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */\nexport function scrubVideo(video: HTMLVideoElement, trigger: Element = video, opts: { ease?: number } = {}): () => void {\n  video.pause();\n  if (prefersReducedMotion()) return () => undefined;\n  const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));\n  let cur = 0;\n  return onFrame(() => {\n    const d = video.duration;\n    if (!d || !Number.isFinite(d)) return;\n    const target = scrollProgress(trigger) * d;\n    cur += (target - cur) * k;\n    if (Math.abs(video.currentTime - cur) > 1 / 60) video.currentTime = cur;\n  });\n}\n\nexport interface FrameSequenceSource {\n  count: number;\n  src?: (i: number) => string;\n  draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;\n}\n/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */\nexport function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger: Element = canvas): () => void {\n  const ctx = canvas.getContext?.('2d');\n  const n = Math.max(1, Math.floor(seq.count));\n  const imgs: HTMLImageElement[] = [];\n  if (seq.src && typeof Image !== 'undefined')\n    for (let i = 0; i < n; i++) {\n      const im = new Image();\n      im.decoding = 'async';\n      im.src = seq.src(i);\n      imgs.push(im);\n    }\n  let last = -1;\n  const paint = (i: number) => {\n    if (!ctx || i === last) return;\n    const w = canvas.width;\n    const h = canvas.height;\n    if (seq.draw) {\n      ctx.clearRect(0, 0, w, h);\n      seq.draw(ctx, i, w, h);\n      last = i;\n    } else if (imgs[i]?.complete && imgs[i].naturalWidth) {\n      const im = imgs[i];\n      const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);\n      ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);\n      last = i;\n    }\n  };\n  paint(0);\n  if (prefersReducedMotion()) return () => undefined;\n  return onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));\n}\n\nexport const VIDEO_FX: EffectDefinition[] = [\n  {\n    name: 'film-burn',\n    kind: 'enter',\n    description: 'A warm light leak burns across as the element appears (`color`).',\n    defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n      if (getComputedStyle(el).position === 'static') {\n        const prev = el.style.position;\n        el.style.position = 'relative';\n        ctx.onCleanup(() => (el.style.position = prev));\n      }\n      const leak = document.createElement('span');\n      leak.setAttribute('aria-hidden', 'true');\n      Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });\n      el.appendChild(leak);\n      ctx.onCleanup(() => leak.remove());\n      const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });\n      const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });\n      const end = () => leak.remove();\n      return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);\n    },\n  },\n  {\n    name: 'jump-cut',\n    kind: 'attention',\n    description: 'Two hard cuts (zoom, reframe) and back, like an edit.',\n    defaults: { duration: 700 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register film-burn and jump-cut (9.4). */\nexport function registerVideoPack(): void {\n  registerEffects(VIDEO_FX);\n}\n"],"names":["prefersReducedMotion","onFrame","registerEffects"],"mappings":"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"}

package/dist/components/fx-video.d.cts

@@ -0,0 +1,80 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
+ *
+ * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
+ *   follows the scroll progress of `trigger` (default the video) through the
+ *   viewport, eased. Returns a stop function.
+ * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
+ *   image sequence scrubbed by scroll: frame `i` is the image `src(i)`
+ *   (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
+ * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
+ *   at the top.
+ *
+ * Effects: `film-burn` (enter) — a warm light leak burns across as the
+ * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
+ * and back, like an edit. Reduced motion: scrubbing shows the first frame,
+ * film-burn fades, jump-cut does nothing.
+ */
+
+/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
+declare function scrollProgress(el: Element): number;
+/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
+declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
+    ease?: number;
+}): () => void;
+interface FrameSequenceSource {
+    count: number;
+    src?: (i: number) => string;
+    draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
+}
+/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
+declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
+declare const VIDEO_FX: EffectDefinition[];
+/** Register film-burn and jump-cut (9.4). */
+declare function registerVideoPack(): void;
+
+export { VIDEO_FX, frameSequence, registerVideoPack, scrollProgress, scrubVideo };
+export type { FrameSequenceSource };

package/dist/components/fx-video.d.ts

@@ -0,0 +1,80 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
+ *
+ * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
+ *   follows the scroll progress of `trigger` (default the video) through the
+ *   viewport, eased. Returns a stop function.
+ * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
+ *   image sequence scrubbed by scroll: frame `i` is the image `src(i)`
+ *   (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
+ * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
+ *   at the top.
+ *
+ * Effects: `film-burn` (enter) — a warm light leak burns across as the
+ * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
+ * and back, like an edit. Reduced motion: scrubbing shows the first frame,
+ * film-burn fades, jump-cut does nothing.
+ */
+
+/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
+declare function scrollProgress(el: Element): number;
+/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
+declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
+    ease?: number;
+}): () => void;
+interface FrameSequenceSource {
+    count: number;
+    src?: (i: number) => string;
+    draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
+}
+/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
+declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
+declare const VIDEO_FX: EffectDefinition[];
+/** Register film-burn and jump-cut (9.4). */
+declare function registerVideoPack(): void;
+
+export { VIDEO_FX, frameSequence, registerVideoPack, scrollProgress, scrubVideo };
+export type { FrameSequenceSource };

package/dist/components/fx-video.js

@@ -0,0 +1,105 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import { p as prefersReducedMotion, o as onFrame } from '../chunks/base-CLuqlLfG.js';
+
+/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
+function scrollProgress(el) {
+    const r = el.getBoundingClientRect();
+    const vh = (typeof innerHeight === 'number' && innerHeight) || 1;
+    return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));
+}
+/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
+function scrubVideo(video, trigger = video, opts = {}) {
+    video.pause();
+    if (prefersReducedMotion())
+        return () => undefined;
+    const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));
+    let cur = 0;
+    return onFrame(() => {
+        const d = video.duration;
+        if (!d || !Number.isFinite(d))
+            return;
+        const target = scrollProgress(trigger) * d;
+        cur += (target - cur) * k;
+        if (Math.abs(video.currentTime - cur) > 1 / 60)
+            video.currentTime = cur;
+    });
+}
+/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
+function frameSequence(canvas, seq, trigger = canvas) {
+    const ctx = canvas.getContext?.('2d');
+    const n = Math.max(1, Math.floor(seq.count));
+    const imgs = [];
+    if (seq.src && typeof Image !== 'undefined')
+        for (let i = 0; i < n; i++) {
+            const im = new Image();
+            im.decoding = 'async';
+            im.src = seq.src(i);
+            imgs.push(im);
+        }
+    let last = -1;
+    const paint = (i) => {
+        if (!ctx || i === last)
+            return;
+        const w = canvas.width;
+        const h = canvas.height;
+        if (seq.draw) {
+            ctx.clearRect(0, 0, w, h);
+            seq.draw(ctx, i, w, h);
+            last = i;
+        }
+        else if (imgs[i]?.complete && imgs[i].naturalWidth) {
+            const im = imgs[i];
+            const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);
+            ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);
+            last = i;
+        }
+    };
+    paint(0);
+    if (prefersReducedMotion())
+        return () => undefined;
+    return onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));
+}
+const VIDEO_FX = [
+    {
+        name: 'film-burn',
+        kind: 'enter',
+        description: 'A warm light leak burns across as the element appears (`color`).',
+        defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const leak = document.createElement('span');
+            leak.setAttribute('aria-hidden', 'true');
+            Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });
+            el.appendChild(leak);
+            ctx.onCleanup(() => leak.remove());
+            const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });
+            const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });
+            const end = () => leak.remove();
+            return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);
+        },
+    },
+    {
+        name: 'jump-cut',
+        kind: 'attention',
+        description: 'Two hard cuts (zoom, reframe) and back, like an edit.',
+        defaults: { duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register film-burn and jump-cut (9.4). */
+function registerVideoPack() {
+    registerEffects(VIDEO_FX);
+}
+
+export { VIDEO_FX, frameSequence, registerVideoPack, scrollProgress, scrubVideo };
+//# sourceMappingURL=fx-video.js.map

package/dist/components/fx-video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-video.js","sources":["../../src/components/fx2/video.ts"],"sourcesContent":["/**\n * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):\n *\n * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`\n *   follows the scroll progress of `trigger` (default the video) through the\n *   viewport, eased. Returns a stop function.\n * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style\n *   image sequence scrubbed by scroll: frame `i` is the image `src(i)`\n *   (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.\n * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves\n *   at the top.\n *\n * Effects: `film-burn` (enter) — a warm light leak burns across as the\n * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)\n * and back, like an edit. Reduced motion: scrubbing shows the first frame,\n * film-burn fades, jump-cut does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { onFrame, prefersReducedMotion } from '../base';\n\n/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */\nexport function scrollProgress(el: Element): number {\n  const r = el.getBoundingClientRect();\n  const vh = (typeof innerHeight === 'number' && innerHeight) || 1;\n  return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height || 1)));\n}\n\n/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */\nexport function scrubVideo(video: HTMLVideoElement, trigger: Element = video, opts: { ease?: number } = {}): () => void {\n  video.pause();\n  if (prefersReducedMotion()) return () => undefined;\n  const k = Math.min(1, Math.max(0.02, opts.ease ?? 0.15));\n  let cur = 0;\n  return onFrame(() => {\n    const d = video.duration;\n    if (!d || !Number.isFinite(d)) return;\n    const target = scrollProgress(trigger) * d;\n    cur += (target - cur) * k;\n    if (Math.abs(video.currentTime - cur) > 1 / 60) video.currentTime = cur;\n  });\n}\n\nexport interface FrameSequenceSource {\n  count: number;\n  src?: (i: number) => string;\n  draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;\n}\n/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */\nexport function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger: Element = canvas): () => void {\n  const ctx = canvas.getContext?.('2d');\n  const n = Math.max(1, Math.floor(seq.count));\n  const imgs: HTMLImageElement[] = [];\n  if (seq.src && typeof Image !== 'undefined')\n    for (let i = 0; i < n; i++) {\n      const im = new Image();\n      im.decoding = 'async';\n      im.src = seq.src(i);\n      imgs.push(im);\n    }\n  let last = -1;\n  const paint = (i: number) => {\n    if (!ctx || i === last) return;\n    const w = canvas.width;\n    const h = canvas.height;\n    if (seq.draw) {\n      ctx.clearRect(0, 0, w, h);\n      seq.draw(ctx, i, w, h);\n      last = i;\n    } else if (imgs[i]?.complete && imgs[i].naturalWidth) {\n      const im = imgs[i];\n      const s = Math.max(w / im.naturalWidth, h / im.naturalHeight);\n      ctx.drawImage(im, (w - im.naturalWidth * s) / 2, (h - im.naturalHeight * s) / 2, im.naturalWidth * s, im.naturalHeight * s);\n      last = i;\n    }\n  };\n  paint(0);\n  if (prefersReducedMotion()) return () => undefined;\n  return onFrame(() => paint(Math.min(n - 1, Math.floor(scrollProgress(trigger) * n))));\n}\n\nexport const VIDEO_FX: EffectDefinition[] = [\n  {\n    name: 'film-burn',\n    kind: 'enter',\n    description: 'A warm light leak burns across as the element appears (`color`).',\n    defaults: { color: 'rgba(255,140,40,.85)', duration: 1300 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n      if (getComputedStyle(el).position === 'static') {\n        const prev = el.style.position;\n        el.style.position = 'relative';\n        ctx.onCleanup(() => (el.style.position = prev));\n      }\n      const leak = document.createElement('span');\n      leak.setAttribute('aria-hidden', 'true');\n      Object.assign(leak.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: `radial-gradient(ellipse at 20% 50%, ${o.color}, transparent 60%)`, mixBlendMode: 'screen', backgroundSize: '200% 100%' });\n      el.appendChild(leak);\n      ctx.onCleanup(() => leak.remove());\n      const a = ctx.animate(el, [{ opacity: 0, filter: 'brightness(2.2) sepia(.5)' }, { opacity: 1, filter: 'brightness(1.4) sepia(.2)', offset: 0.4 }, { opacity: 1, filter: 'none' }], { duration: o.duration, delay: o.delay, easing: 'ease-out', fill: 'backwards' });\n      const b = ctx.animate(leak, [{ backgroundPosition: '100% 0', opacity: 1 }, { backgroundPosition: '-60% 0', opacity: 0 }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' });\n      const end = () => leak.remove();\n      return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);\n    },\n  },\n  {\n    name: 'jump-cut',\n    kind: 'attention',\n    description: 'Two hard cuts (zoom, reframe) and back, like an edit.',\n    defaults: { duration: 700 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.18) translate(3%, -2%)', offset: 0.3 }, { transform: 'scale(1.06) translate(-4%, 2%)', offset: 0.6 }, { transform: 'none', offset: 0.9 }, { transform: 'none' }], { duration: o.duration, easing: 'steps(1, end)' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register film-burn and jump-cut (9.4). */\nexport function registerVideoPack(): void {\n  registerEffects(VIDEO_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx2.cjs

@@ -29,6 +29,7 @@ var components_fxSpatial = require('./fx-spatial.cjs');
 var components_fxCinema = require('./fx-cinema.cjs');
 var components_fxLottie = require('./fx-lottie.cjs');
 var components_fxGenart = require('./fx-genart.cjs');
+var components_fxVideo = require('./fx-video.cjs');
 require('../chunks/registry-BVklOepd.cjs');
 require('../chunks/base-DoRUZBy-.cjs');
 require('../chunks/generative-BHIj-NU0.cjs');
@@ -65,6 +66,7 @@ const EFFECT_PACKS = {
     cinema: components_fxCinema.CINEMA_FX,
     lottie: components_fxLottie.LOTTIE_FX,
     genart: components_fxGenart.GENART_FX,
+    video: components_fxVideo.VIDEO_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -96,6 +98,7 @@ function registerEffectPacks() {
     components_fxCinema.registerCinemaPack();
     components_fxLottie.registerLottiePack();
     components_fxGenart.registerGenArtPack();
+    components_fxVideo.registerVideoPack();
 }
 
 exports.EFFECT_PACK_FORMAT = manifest.EFFECT_PACK_FORMAT;
@@ -205,6 +208,11 @@ exports.PALETTES = components_fxGenart.PALETTES;
 exports.meshGradient = components_fxGenart.meshGradient;
 exports.registerGenArtPack = components_fxGenart.registerGenArtPack;
 exports.seededRandom = components_fxGenart.seededRandom;
+exports.VIDEO_FX = components_fxVideo.VIDEO_FX;
+exports.frameSequence = components_fxVideo.frameSequence;
+exports.registerVideoPack = components_fxVideo.registerVideoPack;
+exports.scrollProgress = components_fxVideo.scrollProgress;
+exports.scrubVideo = components_fxVideo.scrubVideo;
 exports.EFFECT_PACKS = EFFECT_PACKS;
 exports.registerEffectPacks = registerEffectPacks;
 //# sourceMappingURL=fx2.cjs.map

package/dist/components/fx2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\nimport { PAPER_FX, registerPaperPack, roughLine, paperRandom } from './paper';\nimport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme } from './themefx';\nimport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt } from './gesture3';\nimport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport } from './spatial';\nimport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES } from './cinema';\nimport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs } from './lottie';\nimport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient } from './genart';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\nexport { ORGANIC_FX, registerOrganicPack, blobRadius };\n\nexport { CYBER_FX, registerCyberPack, decodeFrame };\n\nexport { PAPER_FX, registerPaperPack, roughLine, paperRandom };\n\nexport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme };\n\nexport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt };\n\nexport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport };\n\nexport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES };\n\nexport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs };\n\nexport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  gpu: GPU_FX,\n  text: TEXT3_FX,\n  light: LIGHT_FX,\n  depth: DEPTH3_FX,\n  morph: MORPH2_FX,\n  transitions: TRANSITIONS2_FX,\n  weather: WEATHER_FX,\n  physics: PHYSICS2_FX,\n  focus: FOCUS_FX,\n  music: MUSIC_FX,\n  chart: CHART_FX,\n  shop: SHOP_FX,\n  social: SOCIAL_FX,\n  game: GAME_FX,\n  geo: GEO_FX,\n  form: FORM_FX,\n  ai: AI_FX,\n  festival: FESTIVAL_FX,\n  retro: RETRO_FX,\n  organic: ORGANIC_FX,\n  cyber: CYBER_FX,\n  paper: PAPER_FX,\n  surface: SURFACE_FX,\n  gesture3: GESTURE3_FX,\n  spatial: SPATIAL_FX,\n  cinema: CINEMA_FX,\n  lottie: LOTTIE_FX,\n  genart: GENART_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n  registerGpuPack();\n  registerTextPack();\n  registerLightPack();\n  register3dPack();\n  registerMorphPack();\n  registerTransitionsPack();\n  registerWeatherPack();\n  registerPhysicsPack();\n  registerFocusPack();\n  registerMusicPack();\n  registerChartPack();\n  registerShopPack();\n  registerSocialPack();\n  registerGamePack();\n  registerGeoPack();\n  registerFormPack();\n  registerAiPack();\n  registerFestivalPack();\n  registerRetroPack();\n  registerOrganicPack();\n  registerCyberPack();\n  registerPaperPack();\n  registerSurfacePack();\n  registerGesture3Pack();\n  registerSpatialPack();\n  registerCinemaPack();\n  registerLottiePack();\n  registerGenArtPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","FESTIVAL_FX","RETRO_FX","ORGANIC_FX","CYBER_FX","PAPER_FX","SURFACE_FX","GESTURE3_FX","SPATIAL_FX","CINEMA_FX","LOTTIE_FX","GENART_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack","registerSpatialPack","registerCinemaPack","registerLottiePack","registerGenArtPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,GAAG,EAAEC,uBAAM;AACX,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,EAAE,EAAEC,qBAAK;AACT,IAAA,QAAQ,EAAEC,iCAAW;AACrB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,QAAQ,EAAEC,gCAAW;AACrB,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;;AAGnB;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,0CAAoB,EAAE;AACtB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,yCAAoB,EAAE;AACtB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\nimport { PAPER_FX, registerPaperPack, roughLine, paperRandom } from './paper';\nimport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme } from './themefx';\nimport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt } from './gesture3';\nimport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport } from './spatial';\nimport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES } from './cinema';\nimport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs } from './lottie';\nimport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient } from './genart';\nimport { VIDEO_FX, registerVideoPack, scrollProgress, scrubVideo, frameSequence } from './video';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\nexport { ORGANIC_FX, registerOrganicPack, blobRadius };\n\nexport { CYBER_FX, registerCyberPack, decodeFrame };\n\nexport { PAPER_FX, registerPaperPack, roughLine, paperRandom };\n\nexport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme };\n\nexport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt };\n\nexport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport };\n\nexport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES };\n\nexport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs };\n\nexport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient };\n\nexport { VIDEO_FX, registerVideoPack, scrollProgress, scrubVideo, frameSequence };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  gpu: GPU_FX,\n  text: TEXT3_FX,\n  light: LIGHT_FX,\n  depth: DEPTH3_FX,\n  morph: MORPH2_FX,\n  transitions: TRANSITIONS2_FX,\n  weather: WEATHER_FX,\n  physics: PHYSICS2_FX,\n  focus: FOCUS_FX,\n  music: MUSIC_FX,\n  chart: CHART_FX,\n  shop: SHOP_FX,\n  social: SOCIAL_FX,\n  game: GAME_FX,\n  geo: GEO_FX,\n  form: FORM_FX,\n  ai: AI_FX,\n  festival: FESTIVAL_FX,\n  retro: RETRO_FX,\n  organic: ORGANIC_FX,\n  cyber: CYBER_FX,\n  paper: PAPER_FX,\n  surface: SURFACE_FX,\n  gesture3: GESTURE3_FX,\n  spatial: SPATIAL_FX,\n  cinema: CINEMA_FX,\n  lottie: LOTTIE_FX,\n  genart: GENART_FX,\n  video: VIDEO_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n  registerGpuPack();\n  registerTextPack();\n  registerLightPack();\n  register3dPack();\n  registerMorphPack();\n  registerTransitionsPack();\n  registerWeatherPack();\n  registerPhysicsPack();\n  registerFocusPack();\n  registerMusicPack();\n  registerChartPack();\n  registerShopPack();\n  registerSocialPack();\n  registerGamePack();\n  registerGeoPack();\n  registerFormPack();\n  registerAiPack();\n  registerFestivalPack();\n  registerRetroPack();\n  registerOrganicPack();\n  registerCyberPack();\n  registerPaperPack();\n  registerSurfacePack();\n  registerGesture3Pack();\n  registerSpatialPack();\n  registerCinemaPack();\n  registerLottiePack();\n  registerGenArtPack();\n  registerVideoPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","FESTIVAL_FX","RETRO_FX","ORGANIC_FX","CYBER_FX","PAPER_FX","SURFACE_FX","GESTURE3_FX","SPATIAL_FX","CINEMA_FX","LOTTIE_FX","GENART_FX","VIDEO_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack","registerSpatialPack","registerCinemaPack","registerLottiePack","registerGenArtPack","registerVideoPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,GAAG,EAAEC,uBAAM;AACX,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,EAAE,EAAEC,qBAAK;AACT,IAAA,QAAQ,EAAEC,iCAAW;AACrB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,QAAQ,EAAEC,gCAAW;AACrB,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,KAAK,EAAEC,2BAAQ;;AAGjB;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,0CAAoB,EAAE;AACtB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,yCAAoB,EAAE;AACtB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,oCAAiB,EAAE;AACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/fx2.d.cts

@@ -872,6 +872,41 @@ declare const GENART_FX: EffectDefinition[];
 /** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
 declare function registerGenArtPack(): void;
 
+/**
+ * 9.4 — Video motion (`motionary/fx/video`, also `motionary/components/fx-video`):
+ *
+ * - `scrubVideo(video, trigger?)` — scroll-driven video: `currentTime`
+ *   follows the scroll progress of `trigger` (default the video) through the
+ *   viewport, eased. Returns a stop function.
+ * - `frameSequence(canvas, { count, src | draw }, trigger?)` — an Apple-style
+ *   image sequence scrubbed by scroll: frame `i` is the image `src(i)`
+ *   (preloaded) or whatever `draw(ctx, i, w, h)` paints. Returns a stop.
+ * - `scrollProgress(el)` — 0 when `el` enters at the bottom, 1 when it leaves
+ *   at the top.
+ *
+ * Effects: `film-burn` (enter) — a warm light leak burns across as the
+ * element appears; `jump-cut` (attention) — two hard cuts (zoom / reframe)
+ * and back, like an edit. Reduced motion: scrubbing shows the first frame,
+ * film-burn fades, jump-cut does nothing.
+ */
+
+/** Scroll progress of `el` through the viewport: 0 entering at the bottom → 1 leaving at the top (9.4). */
+declare function scrollProgress(el: Element): number;
+/** Scroll-driven video: `video.currentTime` follows the scroll progress of `trigger` (9.4). */
+declare function scrubVideo(video: HTMLVideoElement, trigger?: Element, opts?: {
+    ease?: number;
+}): () => void;
+interface FrameSequenceSource {
+    count: number;
+    src?: (i: number) => string;
+    draw?: (ctx: CanvasRenderingContext2D, i: number, w: number, h: number) => void;
+}
+/** Image-sequence scrubbing on a canvas (preloads `src(i)`, or paints with `draw`) (9.4). */
+declare function frameSequence(canvas: HTMLCanvasElement, seq: FrameSequenceSource, trigger?: Element): () => void;
+declare const VIDEO_FX: EffectDefinition[];
+/** Register film-burn and jump-cut (9.4). */
+declare function registerVideoPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -981,5 +1016,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GENART_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PALETTES, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, meshGradient, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGenArtPack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, seededRandom, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
+export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GENART_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PALETTES, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VIDEO_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, frameSequence, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, meshGradient, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGenArtPack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerVideoPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, scrollProgress, scrubVideo, seededRandom, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
 export type { EffectPackManifest, ShaderSpec };