use-scroll-animate 9.0.0 → 9.2.0

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [9.2.0] - 2026-10-09
+
+### Added
+- **Lottie / Rive import — `motionary/fx/lottie`** (= `motionary/components/fx-lottie`, `registerLottiePack()`, also in `registerEffectPacks()` and the marketplace): `lottieToKeyframes(json)` (layer position / anchor / rotation / scale / opacity → WAAPI keyframes + duration), `lottieToSvg(json)` (ellipse / rect / path shapes with fill / stroke, nested groups), `riveInputs(instance, stateMachine, el, { hover, press, click, enter })` (drive a Rive state machine's boolean / trigger inputs). Effects `lottie-play` (attention) and `icon-pop` (click).
+- **2 new components (9.2)** in `motionary/components/widgets`:
+  - `<usa-lottie>` — Lottie player without lottie-web: `src` or `json`, `autoplay` (on screen), `loop`, `speed`, `label`; `play()`, `pause()`, `stop()`, `parsed`; `usa:load` { duration, layers }, `usa:complete`, `usa:error`.
+  - `<usa-lottie-icon>` — animated icon set shipped as tiny Lottie files (`heart`, `bell`, `check`, `spinner`, `star`, `bolt`; JSON exported as `LOTTIE_ICONS`); `trigger` click · hover · enter · loop, `size`, `color`, `label`; `play()`.
+- Showcase: 3 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- `<usa-lottie>` is an `img` with `label`; icons are decorative (`aria-hidden`) unless they get a `label` (then `img`). Reduced motion: the first frame is shown, nothing autoplays, `icon-pop` / `lottie-play` do nothing.
+
+## [9.1.0] - 2026-10-09
+
+### Added
+- **2 new components (9.1)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-chapter-nav>` — chapter navigation for long-form stories: one entry per `[data-chapter]` section in `for` (title from `data-chapter` or its first heading), per-chapter reading-progress bars, `aria-current="step"` on the current chapter, click to glide there; `orientation`, `label`; `current`, `goTo(i)`; `usa:chapter` { index, title }.
+  - `<usa-scene>` — scroll-scrubbed cinematic shot: its media (`img` / `video` / `[data-shot]`) follows a `camera` move (`dolly-in` · `dolly-out` · `pan-left` · `pan-right` · `tilt-up` · `tilt-down` · `zoom-in` · `zoom-out` · `orbit`, `strength`) as the scene crosses the viewport; `[data-caption][data-at]` captions fade in on cue; `autoplay` plays the move on its own (back and forth) instead of following the scroll; `progress`, `setProgress(p)`; `usa:shot`.
+- **Cinematic pack — `motionary/fx/cinema`** (= `motionary/components/fx-cinema`, `registerCinemaPack()`, also in `registerEffectPacks()`): `dolly-in` (enter), `pan-reveal` (enter), `letterbox` (enter), `rack-focus` (attention). `cameraFrame(move, p, strength)`, `CAMERA_MOVES`. Listed in the `motionary/marketplace` catalogue.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- Chapter nav is a labelled `navigation` with an ordered list of real buttons; the current one has `aria-current="step"`; bars are `aria-hidden`. Scene captions are real text in reading order. Reduced motion: the scene is a still frame with captions shown, chapter jumps are instant, entrances fade, `rack-focus` does nothing.
+
 ## [9.0.0] - 2026-10-09
 
 ### ⚠ Breaking

package/dist/components/fx-cinema.cjs

@@ -0,0 +1,100 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+const CAMERA_MOVES = ['dolly-in', 'dolly-out', 'pan-left', 'pan-right', 'tilt-up', 'tilt-down', 'zoom-in', 'zoom-out', 'orbit'];
+/** Transform of camera `move` at progress `p` (0–1, clamped), `strength` 0–2 (9.1). */
+function cameraFrame(move, p, strength = 1) {
+    const t = Math.min(1, Math.max(0, p));
+    const k = Math.min(2, Math.max(0, strength));
+    const f = (n) => Math.round(n * 1000) / 1000;
+    switch (move) {
+        case 'dolly-in':
+            return `scale(${f(1 + 0.18 * k * t)})`;
+        case 'dolly-out':
+            return `scale(${f(1 + 0.18 * k * (1 - t))})`;
+        case 'pan-left':
+            return `scale(${f(1 + 0.12 * k)}) translateX(${f(6 * k - 12 * k * t)}%)`;
+        case 'pan-right':
+            return `scale(${f(1 + 0.12 * k)}) translateX(${f(-6 * k + 12 * k * t)}%)`;
+        case 'tilt-up':
+            return `scale(${f(1 + 0.12 * k)}) translateY(${f(-6 * k + 12 * k * t)}%)`;
+        case 'tilt-down':
+            return `scale(${f(1 + 0.12 * k)}) translateY(${f(6 * k - 12 * k * t)}%)`;
+        case 'zoom-in':
+            return `scale(${f(1 + 0.4 * k * t * t)})`;
+        case 'zoom-out':
+            return `scale(${f(1 + 0.4 * k * (1 - t) * (1 - t))})`;
+        case 'orbit':
+            return `perspective(900px) rotateY(${f(-12 * k + 24 * k * t)}deg) scale(${f(1 + 0.08 * k)})`;
+        default:
+            return 'none';
+    }
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
+const CINEMA_FX = [
+    {
+        name: 'dolly-in',
+        kind: 'enter',
+        description: 'A slow camera push: starts slightly large and soft, settles sharp (`duration`).',
+        defaults: { duration: 1600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            return ctx.animate(el, [{ transform: 'scale(1.14)', filter: 'blur(6px)', opacity: 0 }, { opacity: 1, offset: 0.3 }, { transform: 'scale(1)', filter: 'blur(0)', opacity: 1 }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.16,.84,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'pan-reveal',
+        kind: 'enter',
+        description: 'The camera pans across the element while a wipe uncovers it (`from`).',
+        defaults: { from: 'left', duration: 1200 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const r = o.from === 'right';
+            return ctx.animate(el, [{ clipPath: r ? 'inset(0 0 0 100%)' : 'inset(0 100% 0 0)', transform: `translateX(${r ? 4 : -4}%) scale(1.06)` }, { clipPath: 'inset(0 0 0 0)', transform: 'none' }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.65,0,.35,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'letterbox',
+        kind: 'enter',
+        description: 'Cinema bars slide in, hold, then open up to reveal the element (`hold`).',
+        defaults: { duration: 1400, hold: 0.35 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const h = Math.min(0.8, Math.max(0, Number(o.hold) || 0));
+            const a = 0.25;
+            const b = Math.min(0.95, a + h);
+            return ctx.animate(el, [{ clipPath: 'inset(50% 0 50% 0)', opacity: 0.6 }, { clipPath: 'inset(12% 0 12% 0)', opacity: 1, offset: a }, { clipPath: 'inset(12% 0 12% 0)', offset: b }, { clipPath: 'inset(0 0 0 0)' }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'rack-focus',
+        kind: 'attention',
+        description: "Focus pulls from the element's first child to the rest and back, like racking focus between subjects.",
+        defaults: { duration: 1800 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const kids = Array.from(el.children);
+            if (kids.length < 2)
+                return ctx.animate(el, [{ filter: 'blur(0)' }, { filter: 'blur(4px)', offset: 0.5 }, { filter: 'blur(0)' }], { duration: o.duration })?.finished.catch(() => undefined);
+            const [first, ...rest] = kids;
+            const runs = [ctx.animate(first, [{ filter: 'blur(0)' }, { filter: 'blur(5px)', offset: 0.35 }, { filter: 'blur(5px)', offset: 0.65 }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }), ...rest.map((k) => ctx.animate(k, [{ filter: 'blur(5px)' }, { filter: 'blur(0)', offset: 0.35 }, { filter: 'blur(0)', offset: 0.65 }, { filter: 'blur(5px)' }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }))];
+            return Promise.all(runs.map((r) => r?.finished.catch(() => undefined))).then(() => undefined);
+        },
+    },
+];
+/** Register dolly-in, pan-reveal, letterbox and rack-focus (9.1). */
+function registerCinemaPack() {
+    registry.registerEffects(CINEMA_FX);
+}
+
+exports.CAMERA_MOVES = CAMERA_MOVES;
+exports.CINEMA_FX = CINEMA_FX;
+exports.cameraFrame = cameraFrame;
+exports.registerCinemaPack = registerCinemaPack;
+//# sourceMappingURL=fx-cinema.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-cinema.cjs","sources":["../../src/components/fx2/cinema.ts"],"sourcesContent":["/**\n * 9.1 — Cinematic pack (`motionary/fx/cinema`, also `motionary/components/fx-cinema`):\n *\n * - `dolly-in` (enter) — a slow camera push: the element starts slightly\n *   large and soft and settles sharp, like a dolly shot (`duration`).\n * - `pan-reveal` (enter) — the camera pans across the element while a\n *   wipe uncovers it (`from` left|right).\n * - `letterbox` (enter) — cinema bars slide in, hold, then open up to\n *   reveal the element (`hold`).\n * - `rack-focus` (attention) — focus pulls from the element's first child\n *   to the rest and back, like a focus puller racking between subjects.\n *\n * `cameraFrame(move, p)` gives the transform of a camera move at progress\n * 0–1 (used by `<usa-scene>`). Reduced motion: entrances fade, rack-focus\n * does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nexport const CAMERA_MOVES = ['dolly-in', 'dolly-out', 'pan-left', 'pan-right', 'tilt-up', 'tilt-down', 'zoom-in', 'zoom-out', 'orbit'] as const;\nexport type CameraMove = (typeof CAMERA_MOVES)[number];\n\n/** Transform of camera `move` at progress `p` (0–1, clamped), `strength` 0–2 (9.1). */\nexport function cameraFrame(move: string, p: number, strength = 1): string {\n  const t = Math.min(1, Math.max(0, p));\n  const k = Math.min(2, Math.max(0, strength));\n  const f = (n: number) => Math.round(n * 1000) / 1000;\n  switch (move) {\n    case 'dolly-in':\n      return `scale(${f(1 + 0.18 * k * t)})`;\n    case 'dolly-out':\n      return `scale(${f(1 + 0.18 * k * (1 - t))})`;\n    case 'pan-left':\n      return `scale(${f(1 + 0.12 * k)}) translateX(${f(6 * k - 12 * k * t)}%)`;\n    case 'pan-right':\n      return `scale(${f(1 + 0.12 * k)}) translateX(${f(-6 * k + 12 * k * t)}%)`;\n    case 'tilt-up':\n      return `scale(${f(1 + 0.12 * k)}) translateY(${f(-6 * k + 12 * k * t)}%)`;\n    case 'tilt-down':\n      return `scale(${f(1 + 0.12 * k)}) translateY(${f(6 * k - 12 * k * t)}%)`;\n    case 'zoom-in':\n      return `scale(${f(1 + 0.4 * k * t * t)})`;\n    case 'zoom-out':\n      return `scale(${f(1 + 0.4 * k * (1 - t) * (1 - t))})`;\n    case 'orbit':\n      return `perspective(900px) rotateY(${f(-12 * k + 24 * k * t)}deg) scale(${f(1 + 0.08 * k)})`;\n    default:\n      return 'none';\n  }\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n\nexport const CINEMA_FX: EffectDefinition[] = [\n  {\n    name: 'dolly-in',\n    kind: 'enter',\n    description: 'A slow camera push: starts slightly large and soft, settles sharp (`duration`).',\n    defaults: { duration: 1600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      return ctx.animate(el, [{ transform: 'scale(1.14)', filter: 'blur(6px)', opacity: 0 }, { opacity: 1, offset: 0.3 }, { transform: 'scale(1)', filter: 'blur(0)', opacity: 1 }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.16,.84,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'pan-reveal',\n    kind: 'enter',\n    description: 'The camera pans across the element while a wipe uncovers it (`from`).',\n    defaults: { from: 'left', duration: 1200 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      const r = o.from === 'right';\n      return ctx.animate(el, [{ clipPath: r ? 'inset(0 0 0 100%)' : 'inset(0 100% 0 0)', transform: `translateX(${r ? 4 : -4}%) scale(1.06)` }, { clipPath: 'inset(0 0 0 0)', transform: 'none' }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.65,0,.35,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'letterbox',\n    kind: 'enter',\n    description: 'Cinema bars slide in, hold, then open up to reveal the element (`hold`).',\n    defaults: { duration: 1400, hold: 0.35 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      const h = Math.min(0.8, Math.max(0, Number(o.hold) || 0));\n      const a = 0.25;\n      const b = Math.min(0.95, a + h);\n      return ctx.animate(el, [{ clipPath: 'inset(50% 0 50% 0)', opacity: 0.6 }, { clipPath: 'inset(12% 0 12% 0)', opacity: 1, offset: a }, { clipPath: 'inset(12% 0 12% 0)', offset: b }, { clipPath: 'inset(0 0 0 0)' }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'rack-focus',\n    kind: 'attention',\n    description: \"Focus pulls from the element's first child to the rest and back, like racking focus between subjects.\",\n    defaults: { duration: 1800 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const kids = Array.from(el.children) as HTMLElement[];\n      if (kids.length < 2) return ctx.animate(el, [{ filter: 'blur(0)' }, { filter: 'blur(4px)', offset: 0.5 }, { filter: 'blur(0)' }], { duration: o.duration })?.finished.catch(() => undefined);\n      const [first, ...rest] = kids;\n      const runs = [ctx.animate(first, [{ filter: 'blur(0)' }, { filter: 'blur(5px)', offset: 0.35 }, { filter: 'blur(5px)', offset: 0.65 }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }), ...rest.map((k) => ctx.animate(k, [{ filter: 'blur(5px)' }, { filter: 'blur(0)', offset: 0.35 }, { filter: 'blur(0)', offset: 0.65 }, { filter: 'blur(5px)' }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }))];\n      return Promise.all(runs.map((r) => r?.finished.catch(() => undefined))).then(() => undefined);\n    },\n  },\n];\n\n/** Register dolly-in, pan-reveal, letterbox and rack-focus (9.1). */\nexport function registerCinemaPack(): void {\n  registerEffects(CINEMA_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+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.1 — Cinematic pack (`motionary/fx/cinema`, also `motionary/components/fx-cinema`):
+ *
+ * - `dolly-in` (enter) — a slow camera push: the element starts slightly
+ *   large and soft and settles sharp, like a dolly shot (`duration`).
+ * - `pan-reveal` (enter) — the camera pans across the element while a
+ *   wipe uncovers it (`from` left|right).
+ * - `letterbox` (enter) — cinema bars slide in, hold, then open up to
+ *   reveal the element (`hold`).
+ * - `rack-focus` (attention) — focus pulls from the element's first child
+ *   to the rest and back, like a focus puller racking between subjects.
+ *
+ * `cameraFrame(move, p)` gives the transform of a camera move at progress
+ * 0–1 (used by `<usa-scene>`). Reduced motion: entrances fade, rack-focus
+ * does nothing.
+ */
+
+declare const CAMERA_MOVES: readonly ["dolly-in", "dolly-out", "pan-left", "pan-right", "tilt-up", "tilt-down", "zoom-in", "zoom-out", "orbit"];
+type CameraMove = (typeof CAMERA_MOVES)[number];
+/** Transform of camera `move` at progress `p` (0–1, clamped), `strength` 0–2 (9.1). */
+declare function cameraFrame(move: string, p: number, strength?: number): string;
+declare const CINEMA_FX: EffectDefinition[];
+/** Register dolly-in, pan-reveal, letterbox and rack-focus (9.1). */
+declare function registerCinemaPack(): void;
+
+export { CAMERA_MOVES, CINEMA_FX, cameraFrame, registerCinemaPack };
+export type { CameraMove };

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

@@ -0,0 +1,70 @@
+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.1 — Cinematic pack (`motionary/fx/cinema`, also `motionary/components/fx-cinema`):
+ *
+ * - `dolly-in` (enter) — a slow camera push: the element starts slightly
+ *   large and soft and settles sharp, like a dolly shot (`duration`).
+ * - `pan-reveal` (enter) — the camera pans across the element while a
+ *   wipe uncovers it (`from` left|right).
+ * - `letterbox` (enter) — cinema bars slide in, hold, then open up to
+ *   reveal the element (`hold`).
+ * - `rack-focus` (attention) — focus pulls from the element's first child
+ *   to the rest and back, like a focus puller racking between subjects.
+ *
+ * `cameraFrame(move, p)` gives the transform of a camera move at progress
+ * 0–1 (used by `<usa-scene>`). Reduced motion: entrances fade, rack-focus
+ * does nothing.
+ */
+
+declare const CAMERA_MOVES: readonly ["dolly-in", "dolly-out", "pan-left", "pan-right", "tilt-up", "tilt-down", "zoom-in", "zoom-out", "orbit"];
+type CameraMove = (typeof CAMERA_MOVES)[number];
+/** Transform of camera `move` at progress `p` (0–1, clamped), `strength` 0–2 (9.1). */
+declare function cameraFrame(move: string, p: number, strength?: number): string;
+declare const CINEMA_FX: EffectDefinition[];
+/** Register dolly-in, pan-reveal, letterbox and rack-focus (9.1). */
+declare function registerCinemaPack(): void;
+
+export { CAMERA_MOVES, CINEMA_FX, cameraFrame, registerCinemaPack };
+export type { CameraMove };

package/dist/components/fx-cinema.js

@@ -0,0 +1,95 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import '../chunks/base-CLuqlLfG.js';
+
+const CAMERA_MOVES = ['dolly-in', 'dolly-out', 'pan-left', 'pan-right', 'tilt-up', 'tilt-down', 'zoom-in', 'zoom-out', 'orbit'];
+/** Transform of camera `move` at progress `p` (0–1, clamped), `strength` 0–2 (9.1). */
+function cameraFrame(move, p, strength = 1) {
+    const t = Math.min(1, Math.max(0, p));
+    const k = Math.min(2, Math.max(0, strength));
+    const f = (n) => Math.round(n * 1000) / 1000;
+    switch (move) {
+        case 'dolly-in':
+            return `scale(${f(1 + 0.18 * k * t)})`;
+        case 'dolly-out':
+            return `scale(${f(1 + 0.18 * k * (1 - t))})`;
+        case 'pan-left':
+            return `scale(${f(1 + 0.12 * k)}) translateX(${f(6 * k - 12 * k * t)}%)`;
+        case 'pan-right':
+            return `scale(${f(1 + 0.12 * k)}) translateX(${f(-6 * k + 12 * k * t)}%)`;
+        case 'tilt-up':
+            return `scale(${f(1 + 0.12 * k)}) translateY(${f(-6 * k + 12 * k * t)}%)`;
+        case 'tilt-down':
+            return `scale(${f(1 + 0.12 * k)}) translateY(${f(6 * k - 12 * k * t)}%)`;
+        case 'zoom-in':
+            return `scale(${f(1 + 0.4 * k * t * t)})`;
+        case 'zoom-out':
+            return `scale(${f(1 + 0.4 * k * (1 - t) * (1 - t))})`;
+        case 'orbit':
+            return `perspective(900px) rotateY(${f(-12 * k + 24 * k * t)}deg) scale(${f(1 + 0.08 * k)})`;
+        default:
+            return 'none';
+    }
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
+const CINEMA_FX = [
+    {
+        name: 'dolly-in',
+        kind: 'enter',
+        description: 'A slow camera push: starts slightly large and soft, settles sharp (`duration`).',
+        defaults: { duration: 1600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            return ctx.animate(el, [{ transform: 'scale(1.14)', filter: 'blur(6px)', opacity: 0 }, { opacity: 1, offset: 0.3 }, { transform: 'scale(1)', filter: 'blur(0)', opacity: 1 }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.16,.84,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'pan-reveal',
+        kind: 'enter',
+        description: 'The camera pans across the element while a wipe uncovers it (`from`).',
+        defaults: { from: 'left', duration: 1200 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const r = o.from === 'right';
+            return ctx.animate(el, [{ clipPath: r ? 'inset(0 0 0 100%)' : 'inset(0 100% 0 0)', transform: `translateX(${r ? 4 : -4}%) scale(1.06)` }, { clipPath: 'inset(0 0 0 0)', transform: 'none' }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.65,0,.35,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'letterbox',
+        kind: 'enter',
+        description: 'Cinema bars slide in, hold, then open up to reveal the element (`hold`).',
+        defaults: { duration: 1400, hold: 0.35 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const h = Math.min(0.8, Math.max(0, Number(o.hold) || 0));
+            const a = 0.25;
+            const b = Math.min(0.95, a + h);
+            return ctx.animate(el, [{ clipPath: 'inset(50% 0 50% 0)', opacity: 0.6 }, { clipPath: 'inset(12% 0 12% 0)', opacity: 1, offset: a }, { clipPath: 'inset(12% 0 12% 0)', offset: b }, { clipPath: 'inset(0 0 0 0)' }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'rack-focus',
+        kind: 'attention',
+        description: "Focus pulls from the element's first child to the rest and back, like racking focus between subjects.",
+        defaults: { duration: 1800 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const kids = Array.from(el.children);
+            if (kids.length < 2)
+                return ctx.animate(el, [{ filter: 'blur(0)' }, { filter: 'blur(4px)', offset: 0.5 }, { filter: 'blur(0)' }], { duration: o.duration })?.finished.catch(() => undefined);
+            const [first, ...rest] = kids;
+            const runs = [ctx.animate(first, [{ filter: 'blur(0)' }, { filter: 'blur(5px)', offset: 0.35 }, { filter: 'blur(5px)', offset: 0.65 }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }), ...rest.map((k) => ctx.animate(k, [{ filter: 'blur(5px)' }, { filter: 'blur(0)', offset: 0.35 }, { filter: 'blur(0)', offset: 0.65 }, { filter: 'blur(5px)' }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }))];
+            return Promise.all(runs.map((r) => r?.finished.catch(() => undefined))).then(() => undefined);
+        },
+    },
+];
+/** Register dolly-in, pan-reveal, letterbox and rack-focus (9.1). */
+function registerCinemaPack() {
+    registerEffects(CINEMA_FX);
+}
+
+export { CAMERA_MOVES, CINEMA_FX, cameraFrame, registerCinemaPack };
+//# sourceMappingURL=fx-cinema.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-cinema.js","sources":["../../src/components/fx2/cinema.ts"],"sourcesContent":["/**\n * 9.1 — Cinematic pack (`motionary/fx/cinema`, also `motionary/components/fx-cinema`):\n *\n * - `dolly-in` (enter) — a slow camera push: the element starts slightly\n *   large and soft and settles sharp, like a dolly shot (`duration`).\n * - `pan-reveal` (enter) — the camera pans across the element while a\n *   wipe uncovers it (`from` left|right).\n * - `letterbox` (enter) — cinema bars slide in, hold, then open up to\n *   reveal the element (`hold`).\n * - `rack-focus` (attention) — focus pulls from the element's first child\n *   to the rest and back, like a focus puller racking between subjects.\n *\n * `cameraFrame(move, p)` gives the transform of a camera move at progress\n * 0–1 (used by `<usa-scene>`). Reduced motion: entrances fade, rack-focus\n * does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nexport const CAMERA_MOVES = ['dolly-in', 'dolly-out', 'pan-left', 'pan-right', 'tilt-up', 'tilt-down', 'zoom-in', 'zoom-out', 'orbit'] as const;\nexport type CameraMove = (typeof CAMERA_MOVES)[number];\n\n/** Transform of camera `move` at progress `p` (0–1, clamped), `strength` 0–2 (9.1). */\nexport function cameraFrame(move: string, p: number, strength = 1): string {\n  const t = Math.min(1, Math.max(0, p));\n  const k = Math.min(2, Math.max(0, strength));\n  const f = (n: number) => Math.round(n * 1000) / 1000;\n  switch (move) {\n    case 'dolly-in':\n      return `scale(${f(1 + 0.18 * k * t)})`;\n    case 'dolly-out':\n      return `scale(${f(1 + 0.18 * k * (1 - t))})`;\n    case 'pan-left':\n      return `scale(${f(1 + 0.12 * k)}) translateX(${f(6 * k - 12 * k * t)}%)`;\n    case 'pan-right':\n      return `scale(${f(1 + 0.12 * k)}) translateX(${f(-6 * k + 12 * k * t)}%)`;\n    case 'tilt-up':\n      return `scale(${f(1 + 0.12 * k)}) translateY(${f(-6 * k + 12 * k * t)}%)`;\n    case 'tilt-down':\n      return `scale(${f(1 + 0.12 * k)}) translateY(${f(6 * k - 12 * k * t)}%)`;\n    case 'zoom-in':\n      return `scale(${f(1 + 0.4 * k * t * t)})`;\n    case 'zoom-out':\n      return `scale(${f(1 + 0.4 * k * (1 - t) * (1 - t))})`;\n    case 'orbit':\n      return `perspective(900px) rotateY(${f(-12 * k + 24 * k * t)}deg) scale(${f(1 + 0.08 * k)})`;\n    default:\n      return 'none';\n  }\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n\nexport const CINEMA_FX: EffectDefinition[] = [\n  {\n    name: 'dolly-in',\n    kind: 'enter',\n    description: 'A slow camera push: starts slightly large and soft, settles sharp (`duration`).',\n    defaults: { duration: 1600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      return ctx.animate(el, [{ transform: 'scale(1.14)', filter: 'blur(6px)', opacity: 0 }, { opacity: 1, offset: 0.3 }, { transform: 'scale(1)', filter: 'blur(0)', opacity: 1 }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.16,.84,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'pan-reveal',\n    kind: 'enter',\n    description: 'The camera pans across the element while a wipe uncovers it (`from`).',\n    defaults: { from: 'left', duration: 1200 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      const r = o.from === 'right';\n      return ctx.animate(el, [{ clipPath: r ? 'inset(0 0 0 100%)' : 'inset(0 100% 0 0)', transform: `translateX(${r ? 4 : -4}%) scale(1.06)` }, { clipPath: 'inset(0 0 0 0)', transform: 'none' }], { duration: o.duration, delay: o.delay, easing: 'cubic-bezier(.65,0,.35,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'letterbox',\n    kind: 'enter',\n    description: 'Cinema bars slide in, hold, then open up to reveal the element (`hold`).',\n    defaults: { duration: 1400, hold: 0.35 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      const h = Math.min(0.8, Math.max(0, Number(o.hold) || 0));\n      const a = 0.25;\n      const b = Math.min(0.95, a + h);\n      return ctx.animate(el, [{ clipPath: 'inset(50% 0 50% 0)', opacity: 0.6 }, { clipPath: 'inset(12% 0 12% 0)', opacity: 1, offset: a }, { clipPath: 'inset(12% 0 12% 0)', offset: b }, { clipPath: 'inset(0 0 0 0)' }], { duration: o.duration, delay: o.delay, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'rack-focus',\n    kind: 'attention',\n    description: \"Focus pulls from the element's first child to the rest and back, like racking focus between subjects.\",\n    defaults: { duration: 1800 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const kids = Array.from(el.children) as HTMLElement[];\n      if (kids.length < 2) return ctx.animate(el, [{ filter: 'blur(0)' }, { filter: 'blur(4px)', offset: 0.5 }, { filter: 'blur(0)' }], { duration: o.duration })?.finished.catch(() => undefined);\n      const [first, ...rest] = kids;\n      const runs = [ctx.animate(first, [{ filter: 'blur(0)' }, { filter: 'blur(5px)', offset: 0.35 }, { filter: 'blur(5px)', offset: 0.65 }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }), ...rest.map((k) => ctx.animate(k, [{ filter: 'blur(5px)' }, { filter: 'blur(0)', offset: 0.35 }, { filter: 'blur(0)', offset: 0.65 }, { filter: 'blur(5px)' }, { filter: 'blur(0)' }], { duration: o.duration, easing: 'ease-in-out' }))];\n      return Promise.all(runs.map((r) => r?.finished.catch(() => undefined))).then(() => undefined);\n    },\n  },\n];\n\n/** Register dolly-in, pan-reveal, letterbox and rack-focus (9.1). */\nexport function registerCinemaPack(): void {\n  registerEffects(CINEMA_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx-lottie.cjs

@@ -0,0 +1,216 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+const arr = (v) => (Array.isArray(v) ? v.map(Number) : [Number(v)]);
+/** Frames (t) → values for one transform property (static props give one key at t = ip) (9.2). */
+function track(p, ip) {
+    if (!p)
+        return [];
+    if (!p.a || !Array.isArray(p.k) || typeof p.k[0] !== 'object')
+        return [{ t: ip, v: arr(p.k) }];
+    return p.k.filter((k) => k && k.s != null).map((k) => ({ t: Number(k.t), v: arr(k.s) }));
+}
+const at = (tr, t) => {
+    if (!tr.length)
+        return undefined;
+    if (t <= tr[0].t)
+        return tr[0].v;
+    for (let i = 1; i < tr.length; i++)
+        if (t <= tr[i].t) {
+            const a = tr[i - 1];
+            const b = tr[i];
+            const u = b.t === a.t ? 1 : (t - a.t) / (b.t - a.t);
+            return a.v.map((x, j) => x + ((b.v[j] ?? x) - x) * u);
+        }
+    return tr[tr.length - 1].v;
+};
+const r2 = (n) => Math.round(n * 100) / 100;
+/** Lottie JSON → WAAPI keyframes per layer + duration (ms) (9.2). */
+function lottieToKeyframes(json) {
+    const d = typeof json === 'string' ? JSON.parse(json) : json;
+    const fr = Number(d?.fr) || 30;
+    const ip = Number(d?.ip) || 0;
+    const op = Number(d?.op) || ip + fr;
+    const span = Math.max(1, op - ip);
+    const layers = (Array.isArray(d?.layers) ? d.layers : []).map((L, index) => {
+        const ks = L?.ks || {};
+        const tracks = { p: track(ks.p, ip), s: track(ks.s, ip), r: track(ks.r, ip), o: track(ks.o, ip) };
+        const anchor = arr(ks.a?.k ?? [0, 0]).slice(0, 2) || [0, 0];
+        const times = Array.from(new Set([ip, op, ...Object.values(tracks).flat().map((k) => k.t)])).filter((t) => t >= ip && t <= op).sort((a, b) => a - b);
+        const keyframes = times.map((t) => {
+            const p = at(tracks.p, t);
+            const s = at(tracks.s, t);
+            const r = at(tracks.r, t);
+            const o = at(tracks.o, t);
+            // Lottie order: move the anchor to the position, rotate + scale around the anchor
+            const pp = p || anchor;
+            const tf = [`translate(${r2(pp[0])}px, ${r2(pp[1] ?? 0)}px)`];
+            if (r)
+                tf.push(`rotate(${r2(r[0])}deg)`);
+            if (s)
+                tf.push(`scale(${r2(s[0] / 100)}, ${r2((s[1] ?? s[0]) / 100)})`);
+            tf.push(`translate(${r2(-anchor[0])}px, ${r2(-anchor[1])}px)`);
+            const k = { offset: r2((t - ip) / span), transform: tf.join(' ') };
+            if (o)
+                k.opacity = r2(o[0] / 100);
+            return k;
+        });
+        return { name: String(L?.nm ?? `layer ${index + 1}`), index, keyframes, anchor };
+    });
+    return { width: Number(d?.w) || 100, height: Number(d?.h) || 100, duration: Math.round((span / fr) * 1000), layers };
+}
+const hex = (c) => {
+    const v = arr(c?.k ?? c).slice(0, 3).map((x) => Math.round(Math.min(1, Math.max(0, x)) * 255));
+    return `#${v.map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+};
+function shapes(items, fill, stroke, sw) {
+    let f = fill;
+    let s = stroke;
+    let w = sw;
+    for (const it of items) {
+        if (it?.ty === 'fl')
+            f = hex(it.c);
+        if (it?.ty === 'st') {
+            s = hex(it.c);
+            w = Number(it.w?.k) || 2;
+        }
+    }
+    const paint = `fill="${f}"${s !== 'none' ? ` stroke="${s}" stroke-width="${w}"` : ''}`;
+    return items
+        .map((it) => {
+        if (it?.ty === 'gr')
+            return `<g>${shapes(it.it || [], f, s, w)}</g>`;
+        if (it?.ty === 'el') {
+            const [cx, cy] = arr(it.p?.k ?? [0, 0]);
+            const [sx, sy] = arr(it.s?.k ?? [10, 10]);
+            return `<ellipse cx="${cx}" cy="${cy}" rx="${sx / 2}" ry="${(sy ?? sx) / 2}" ${paint}/>`;
+        }
+        if (it?.ty === 'rc') {
+            const [cx, cy] = arr(it.p?.k ?? [0, 0]);
+            const [sx, sy] = arr(it.s?.k ?? [10, 10]);
+            return `<rect x="${cx - sx / 2}" y="${cy - sy / 2}" width="${sx}" height="${sy}" rx="${Number(it.r?.k) || 0}" ${paint}/>`;
+        }
+        if (it?.ty === 'sh') {
+            const k = it.ks?.k;
+            const v = k?.v || [];
+            if (!v.length)
+                return '';
+            const i = k.i || [];
+            const o = k.o || [];
+            let dd = `M${v[0][0]} ${v[0][1]}`;
+            for (let n = 1; n < v.length + (k.c ? 1 : 0); n++) {
+                const a = v[n - 1];
+                const b = v[n % v.length];
+                const c1 = [a[0] + (o[n - 1]?.[0] || 0), a[1] + (o[n - 1]?.[1] || 0)];
+                const c2 = [b[0] + (i[n % v.length]?.[0] || 0), b[1] + (i[n % v.length]?.[1] || 0)];
+                dd += ` C${c1[0]} ${c1[1]} ${c2[0]} ${c2[1]} ${b[0]} ${b[1]}`;
+            }
+            return `<path d="${dd}${k.c ? 'Z' : ''}" ${paint}/>`;
+        }
+        return '';
+    })
+        .join('');
+}
+/** Render the simple vector layers of a Lottie JSON as an SVG string (one `<g data-layer>` per layer, top layer last) (9.2). */
+function lottieToSvg(json) {
+    const d = typeof json === 'string' ? JSON.parse(json) : json;
+    const w = Number(d?.w) || 100;
+    const h = Number(d?.h) || 100;
+    const ls = Array.isArray(d?.layers) ? d.layers : [];
+    const groups = ls
+        .map((L, i) => ({ L, i }))
+        .reverse()
+        .map(({ L, i }) => `<g data-layer="${i}"><g class="usa-lt-inner">${shapes(L?.shapes || [], '#000', 'none', 0)}</g></g>`)
+        .join('');
+    return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" aria-hidden="true">${groups}</svg>`;
+}
+/** Wire hover / press / click / enter on `el` to a Rive state machine's inputs: map { hover: 'isHover', click: 'fire' } (9.2). */
+function riveInputs(instance, stateMachine, el, map) {
+    const inputs = (instance.stateMachineInputs(stateMachine) || []);
+    const get = (n) => inputs.find((i) => i.name === n);
+    const set = (n, v) => {
+        const i = get(n);
+        if (!i)
+            return;
+        // Rive StateMachineInputType: 58 = trigger (fire on true), 59 = boolean
+        if (i.type === 58 && typeof i.fire === 'function') {
+            if (v)
+                i.fire();
+        }
+        else
+            i.value = v;
+    };
+    const offs = [];
+    const on = (t, fn) => {
+        el.addEventListener(t, fn);
+        offs.push(() => el.removeEventListener(t, fn));
+    };
+    if (map.hover)
+        (on('pointerenter', () => set(map.hover, true)), on('pointerleave', () => set(map.hover, false)));
+    if (map.press)
+        (on('pointerdown', () => set(map.press, true)), on('pointerup', () => set(map.press, false)));
+    if (map.click)
+        on('click', () => set(map.click, true));
+    if (map.enter && typeof IntersectionObserver !== 'undefined') {
+        const io = new IntersectionObserver((es) => es.forEach((e) => set(map.enter, e.isIntersecting)));
+        io.observe(el);
+        offs.push(() => io.disconnect());
+    }
+    return () => offs.splice(0).forEach((f) => f());
+}
+const LOTTIE_FX = [
+    {
+        name: 'lottie-play',
+        kind: 'attention',
+        description: 'Replays the Lottie keyframes stored on an element by <usa-lottie> (or a `json` option) once.',
+        defaults: {},
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const host = el.closest('usa-lottie');
+            if (host?.play)
+                return void host.play();
+            if (!o.json)
+                return;
+            const m = lottieToKeyframes(o.json);
+            return Promise.all(m.layers.map((l) => ctx.animate(el, l.keyframes, { duration: m.duration })?.finished.catch(() => undefined))).then(() => undefined);
+        },
+    },
+    {
+        name: 'icon-pop',
+        kind: 'click',
+        description: 'A sticker-like pop with a ring burst, for icons (`color`).',
+        defaults: { color: '#f43f5e', duration: 500 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const ring = document.createElement('span');
+            ring.setAttribute('aria-hidden', 'true');
+            Object.assign(ring.style, { position: 'absolute', inset: '0', borderRadius: '50%', border: `2px solid ${o.color}`, pointerEvents: 'none' });
+            el.appendChild(ring);
+            ctx.onCleanup(() => ring.remove());
+            const a = ctx.animate(el, [{ transform: 'scale(1)' }, { transform: 'scale(.8)', offset: 0.2 }, { transform: 'scale(1.2)', offset: 0.55 }, { transform: 'scale(1)' }], { duration: o.duration, easing: 'cubic-bezier(.3,1.5,.5,1)' });
+            const b = ctx.animate(ring, [{ transform: 'scale(.6)', opacity: 1 }, { transform: 'scale(1.8)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });
+            const end = () => ring.remove();
+            return Promise.all([a?.finished.catch(() => undefined), b?.finished.catch(() => undefined)]).then(end, end);
+        },
+    },
+];
+/** Register lottie-play and icon-pop (9.2). */
+function registerLottiePack() {
+    registry.registerEffects(LOTTIE_FX);
+}
+
+exports.LOTTIE_FX = LOTTIE_FX;
+exports.lottieToKeyframes = lottieToKeyframes;
+exports.lottieToSvg = lottieToSvg;
+exports.registerLottiePack = registerLottiePack;
+exports.riveInputs = riveInputs;
+//# sourceMappingURL=fx-lottie.cjs.map