use-scroll-animate 9.2.0 → 9.4.0

package/CHANGELOG.md

@@ -7,6 +7,30 @@ 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
+- **2 new components (9.3)** in `motionary/components/widgets`:
+  - `<usa-gen-art>` — seeded generative artwork on a canvas: `art` = `flow` (flow field) · `circles` (circle packing) · `truchet` (quarter-arc tiles) · `waves` (layered ridges), `seed`, `palette`, `label`; draws itself in on screen; click / Enter re-seeds; `generate(seed?)`, `toDataURL()`, `seed`; `usa:generate` { seed }.
+  - `<usa-bg-generator>` — background generator: palette + style (`mesh`, `grain`, `stripes`, `dots`) + shuffle, live preview with a cross-fade, copy the CSS; `css`, `shuffle()`, `copy()`; `usa:change` { css, seed }; `backgroundCss()`.
+- **Generative art 2.0 pack — `motionary/fx/genart`** (= `motionary/components/fx-genart`, `registerGenArtPack()`, also in `registerEffectPacks()` and the marketplace): `halftone-in` (enter), `mesh-drift` (loop), `kaleido` (loop), `grain-flicker` (loop). `PALETTES`, `seededRandom()`, `meshGradient()`.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- `<usa-gen-art>` is a focusable `img` whose label names the art style and seed (updated on re-seed). `<usa-bg-generator>` is a labelled `group` of real `<select>`s and buttons; the preview is `aria-hidden` and the CSS is shown as text. Reduced motion: artwork is drawn at once, no cross-fade, `halftone-in` fades, the loops are skipped.
+
 ## [9.2.0] - 2026-10-09
 
 ### Added

package/dist/components/fx-genart.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+const PALETTES = {
+    sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],
+    ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],
+    forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],
+    candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],
+    mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],
+};
+/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
+function seededRandom(seed) {
+    let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;
+    return () => {
+        a = (a + 0x6d2b79f5) >>> 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
+function meshGradient(seed = 1, palette = 'sunset') {
+    const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;
+    const r = seededRandom(seed);
+    const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);
+    return `${blobs.join(', ')}, ${pal[0]}`;
+}
+const overlay = (el, ctx) => {
+    if (getComputedStyle(el).position === 'static') {
+        const prev = el.style.position;
+        el.style.position = 'relative';
+        ctx.onCleanup(() => (el.style.position = prev));
+    }
+    const o = document.createElement('span');
+    o.setAttribute('aria-hidden', 'true');
+    Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });
+    el.appendChild(o);
+    ctx.onCleanup(() => o.remove());
+    return o;
+};
+const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\")";
+const GENART_FX = [
+    {
+        name: 'halftone-in',
+        kind: 'enter',
+        description: 'The element prints in through a growing halftone dot screen (`dot` px).',
+        defaults: { dot: 10, duration: 1100 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
+            const d = Math.max(4, Math.min(40, Number(o.dot) || 10));
+            const m = (r) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;
+            const prev = [el.style.maskImage, el.style.webkitMaskImage];
+            ctx.onCleanup(() => {
+                el.style.maskImage = prev[0];
+                el.style.webkitMaskImage = prev[1];
+            });
+            const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 }]), { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });
+            return a?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'mesh-drift',
+        kind: 'loop',
+        description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',
+        defaults: { seed: 3, palette: 'sunset', duration: 14000 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            ov.style.zIndex = '-1';
+            ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);
+            ov.style.backgroundSize = '200% 200%';
+            if (getComputedStyle(el).isolation !== 'isolate') {
+                const prev = el.style.isolation;
+                el.style.isolation = 'isolate';
+                ctx.onCleanup(() => (el.style.isolation = prev));
+            }
+            const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => {
+                a?.cancel();
+                ov.remove();
+            };
+        },
+    },
+    {
+        name: 'kaleido',
+        kind: 'loop',
+        description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',
+        defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));
+            const inner = document.createElement('i');
+            Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });
+            ov.appendChild(inner);
+            const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });
+            return () => {
+                a?.cancel();
+                ov.remove();
+            };
+        },
+    },
+    {
+        name: 'grain-flicker',
+        kind: 'loop',
+        description: 'Animated film grain over the element (`opacity`).',
+        defaults: { opacity: 0.25 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });
+            const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });
+            return () => {
+                a?.cancel();
+                ov.remove();
+            };
+        },
+    },
+];
+/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
+function registerGenArtPack() {
+    registry.registerEffects(GENART_FX);
+}
+
+exports.GENART_FX = GENART_FX;
+exports.PALETTES = PALETTES;
+exports.meshGradient = meshGradient;
+exports.registerGenArtPack = registerGenArtPack;
+exports.seededRandom = seededRandom;
+//# sourceMappingURL=fx-genart.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-genart.cjs","sources":["../../src/components/fx2/genart.ts"],"sourcesContent":["/**\n * 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):\n *\n * - `halftone-in` (enter) — the element prints in through a growing\n *   halftone dot screen, like a comic-book plate (`dot`).\n * - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly\n *   drifts (`seed`, `palette`).\n * - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly\n *   (`color`, `segments`).\n * - `grain-flicker` (loop) — animated film grain over the element.\n *\n * `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS\n * background string) are shared with `<usa-bg-generator>` and\n * `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nexport const PALETTES: Record<string, string[]> = {\n  sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],\n  ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],\n  forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],\n  candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],\n  mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],\n};\n\n/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */\nexport function seededRandom(seed: number): () => number {\n  let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = a;\n    t = Math.imul(t ^ (t >>> 15), t | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */\nexport function meshGradient(seed = 1, palette: string | string[] = 'sunset'): string {\n  const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;\n  const r = seededRandom(seed);\n  const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);\n  return `${blobs.join(', ')}, ${pal[0]}`;\n}\n\nconst overlay = (el: HTMLElement, ctx: EffectContext) => {\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 o = document.createElement('span');\n  o.setAttribute('aria-hidden', 'true');\n  Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });\n  el.appendChild(o);\n  ctx.onCleanup(() => o.remove());\n  return o;\n};\nconst GRAIN = \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\\\")\";\n\nexport const GENART_FX: EffectDefinition[] = [\n  {\n    name: 'halftone-in',\n    kind: 'enter',\n    description: 'The element prints in through a growing halftone dot screen (`dot` px).',\n    defaults: { dot: 10, duration: 1100 },\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      const d = Math.max(4, Math.min(40, Number(o.dot) || 10));\n      const m = (r: number) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;\n      const prev = [el.style.maskImage, (el.style as any).webkitMaskImage];\n      ctx.onCleanup(() => {\n        el.style.maskImage = prev[0];\n        (el.style as any).webkitMaskImage = prev[1];\n      });\n      const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 } as any]) as Keyframe[], { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });\n      return a?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'mesh-drift',\n    kind: 'loop',\n    description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',\n    defaults: { seed: 3, palette: 'sunset', duration: 14000 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      ov.style.zIndex = '-1';\n      ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);\n      ov.style.backgroundSize = '200% 200%';\n      if (getComputedStyle(el).isolation !== 'isolate') {\n        const prev = el.style.isolation;\n        el.style.isolation = 'isolate';\n        ctx.onCleanup(() => (el.style.isolation = prev));\n      }\n      const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => {\n        a?.cancel();\n        ov.remove();\n      };\n    },\n  },\n  {\n    name: 'kaleido',\n    kind: 'loop',\n    description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',\n    defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));\n      const inner = document.createElement('i');\n      Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });\n      ov.appendChild(inner);\n      const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });\n      return () => {\n        a?.cancel();\n        ov.remove();\n      };\n    },\n  },\n  {\n    name: 'grain-flicker',\n    kind: 'loop',\n    description: 'Animated film grain over the element (`opacity`).',\n    defaults: { opacity: 0.25 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });\n      const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });\n      return () => {\n        a?.cancel();\n        ov.remove();\n      };\n    },\n  },\n];\n\n/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */\nexport function registerGenArtPack(): void {\n  registerEffects(GENART_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

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

@@ -0,0 +1,69 @@
+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.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
+ *
+ * - `halftone-in` (enter) — the element prints in through a growing
+ *   halftone dot screen, like a comic-book plate (`dot`).
+ * - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
+ *   drifts (`seed`, `palette`).
+ * - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
+ *   (`color`, `segments`).
+ * - `grain-flicker` (loop) — animated film grain over the element.
+ *
+ * `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
+ * background string) are shared with `<usa-bg-generator>` and
+ * `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
+ */
+
+declare const PALETTES: Record<string, string[]>;
+/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
+declare function seededRandom(seed: number): () => number;
+/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
+declare function meshGradient(seed?: number, palette?: string | string[]): string;
+declare const GENART_FX: EffectDefinition[];
+/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
+declare function registerGenArtPack(): void;
+
+export { GENART_FX, PALETTES, meshGradient, registerGenArtPack, seededRandom };

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

@@ -0,0 +1,69 @@
+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.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
+ *
+ * - `halftone-in` (enter) — the element prints in through a growing
+ *   halftone dot screen, like a comic-book plate (`dot`).
+ * - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
+ *   drifts (`seed`, `palette`).
+ * - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
+ *   (`color`, `segments`).
+ * - `grain-flicker` (loop) — animated film grain over the element.
+ *
+ * `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
+ * background string) are shared with `<usa-bg-generator>` and
+ * `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
+ */
+
+declare const PALETTES: Record<string, string[]>;
+/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
+declare function seededRandom(seed: number): () => number;
+/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
+declare function meshGradient(seed?: number, palette?: string | string[]): string;
+declare const GENART_FX: EffectDefinition[];
+/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
+declare function registerGenArtPack(): void;
+
+export { GENART_FX, PALETTES, meshGradient, registerGenArtPack, seededRandom };

package/dist/components/fx-genart.js

@@ -0,0 +1,131 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import '../chunks/base-CLuqlLfG.js';
+
+const PALETTES = {
+    sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],
+    ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],
+    forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],
+    candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],
+    mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],
+};
+/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
+function seededRandom(seed) {
+    let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;
+    return () => {
+        a = (a + 0x6d2b79f5) >>> 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
+function meshGradient(seed = 1, palette = 'sunset') {
+    const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;
+    const r = seededRandom(seed);
+    const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);
+    return `${blobs.join(', ')}, ${pal[0]}`;
+}
+const overlay = (el, ctx) => {
+    if (getComputedStyle(el).position === 'static') {
+        const prev = el.style.position;
+        el.style.position = 'relative';
+        ctx.onCleanup(() => (el.style.position = prev));
+    }
+    const o = document.createElement('span');
+    o.setAttribute('aria-hidden', 'true');
+    Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });
+    el.appendChild(o);
+    ctx.onCleanup(() => o.remove());
+    return o;
+};
+const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\")";
+const GENART_FX = [
+    {
+        name: 'halftone-in',
+        kind: 'enter',
+        description: 'The element prints in through a growing halftone dot screen (`dot` px).',
+        defaults: { dot: 10, duration: 1100 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
+            const d = Math.max(4, Math.min(40, Number(o.dot) || 10));
+            const m = (r) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;
+            const prev = [el.style.maskImage, el.style.webkitMaskImage];
+            ctx.onCleanup(() => {
+                el.style.maskImage = prev[0];
+                el.style.webkitMaskImage = prev[1];
+            });
+            const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 }]), { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });
+            return a?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'mesh-drift',
+        kind: 'loop',
+        description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',
+        defaults: { seed: 3, palette: 'sunset', duration: 14000 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            ov.style.zIndex = '-1';
+            ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);
+            ov.style.backgroundSize = '200% 200%';
+            if (getComputedStyle(el).isolation !== 'isolate') {
+                const prev = el.style.isolation;
+                el.style.isolation = 'isolate';
+                ctx.onCleanup(() => (el.style.isolation = prev));
+            }
+            const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => {
+                a?.cancel();
+                ov.remove();
+            };
+        },
+    },
+    {
+        name: 'kaleido',
+        kind: 'loop',
+        description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',
+        defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));
+            const inner = document.createElement('i');
+            Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });
+            ov.appendChild(inner);
+            const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });
+            return () => {
+                a?.cancel();
+                ov.remove();
+            };
+        },
+    },
+    {
+        name: 'grain-flicker',
+        kind: 'loop',
+        description: 'Animated film grain over the element (`opacity`).',
+        defaults: { opacity: 0.25 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });
+            const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });
+            return () => {
+                a?.cancel();
+                ov.remove();
+            };
+        },
+    },
+];
+/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
+function registerGenArtPack() {
+    registerEffects(GENART_FX);
+}
+
+export { GENART_FX, PALETTES, meshGradient, registerGenArtPack, seededRandom };
+//# sourceMappingURL=fx-genart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-genart.js","sources":["../../src/components/fx2/genart.ts"],"sourcesContent":["/**\n * 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):\n *\n * - `halftone-in` (enter) — the element prints in through a growing\n *   halftone dot screen, like a comic-book plate (`dot`).\n * - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly\n *   drifts (`seed`, `palette`).\n * - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly\n *   (`color`, `segments`).\n * - `grain-flicker` (loop) — animated film grain over the element.\n *\n * `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS\n * background string) are shared with `<usa-bg-generator>` and\n * `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nexport const PALETTES: Record<string, string[]> = {\n  sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],\n  ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],\n  forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],\n  candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],\n  mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],\n};\n\n/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */\nexport function seededRandom(seed: number): () => number {\n  let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;\n  return () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = a;\n    t = Math.imul(t ^ (t >>> 15), t | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n}\n\n/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */\nexport function meshGradient(seed = 1, palette: string | string[] = 'sunset'): string {\n  const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;\n  const r = seededRandom(seed);\n  const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);\n  return `${blobs.join(', ')}, ${pal[0]}`;\n}\n\nconst overlay = (el: HTMLElement, ctx: EffectContext) => {\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 o = document.createElement('span');\n  o.setAttribute('aria-hidden', 'true');\n  Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });\n  el.appendChild(o);\n  ctx.onCleanup(() => o.remove());\n  return o;\n};\nconst GRAIN = \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\\\")\";\n\nexport const GENART_FX: EffectDefinition[] = [\n  {\n    name: 'halftone-in',\n    kind: 'enter',\n    description: 'The element prints in through a growing halftone dot screen (`dot` px).',\n    defaults: { dot: 10, duration: 1100 },\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      const d = Math.max(4, Math.min(40, Number(o.dot) || 10));\n      const m = (r: number) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;\n      const prev = [el.style.maskImage, (el.style as any).webkitMaskImage];\n      ctx.onCleanup(() => {\n        el.style.maskImage = prev[0];\n        (el.style as any).webkitMaskImage = prev[1];\n      });\n      const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 } as any]) as Keyframe[], { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });\n      return a?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'mesh-drift',\n    kind: 'loop',\n    description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',\n    defaults: { seed: 3, palette: 'sunset', duration: 14000 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      ov.style.zIndex = '-1';\n      ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);\n      ov.style.backgroundSize = '200% 200%';\n      if (getComputedStyle(el).isolation !== 'isolate') {\n        const prev = el.style.isolation;\n        el.style.isolation = 'isolate';\n        ctx.onCleanup(() => (el.style.isolation = prev));\n      }\n      const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => {\n        a?.cancel();\n        ov.remove();\n      };\n    },\n  },\n  {\n    name: 'kaleido',\n    kind: 'loop',\n    description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',\n    defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));\n      const inner = document.createElement('i');\n      Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });\n      ov.appendChild(inner);\n      const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });\n      return () => {\n        a?.cancel();\n        ov.remove();\n      };\n    },\n  },\n  {\n    name: 'grain-flicker',\n    kind: 'loop',\n    description: 'Animated film grain over the element (`opacity`).',\n    defaults: { opacity: 0.25 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });\n      const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });\n      return () => {\n        a?.cancel();\n        ov.remove();\n      };\n    },\n  },\n];\n\n/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */\nexport function registerGenArtPack(): void {\n  registerEffects(GENART_FX);\n}\n"],"names":[],"mappings":"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"}

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