use-scroll-animate 8.3.0 → 8.5.0

package/CHANGELOG.md

@@ -7,6 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.5.0] - 2026-10-09
+
+### Added
+- **2 new components (8.5)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-sticky-wall>` — wall of sticky notes: each child becomes a pinned paper note (`data-color` yellow · pink · blue · green, or cycling) with a slight tilt (`seed`); notes drop onto the wall one by one on first view; click / Enter lifts a note to the front (`pick(index)`, `usa:pick` { index }); `notes`, `label`.
+  - `<usa-sketch-chart>` — hand-drawn chart: wobbly pencil axes, hatched bars (`type="bar"`) or a sketchy line with dots (`type="line"`), sketched in stroke by stroke on first view; `values`, `labels`, `color`, `label`; `values` / `setValues()`; `usa:drawn`.
+- **Paper & hand-drawn pack — `motionary/fx/paper`** (= `motionary/components/fx-paper`, `registerPaperPack()`, also in `registerEffectPacks()`): `paper-unfold` (enter), `pencil-sketch` (enter), `watercolor` (enter), `crumple` (attention). `roughLine()`, `paperRandom()`.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- Sticky wall is a `list` of focusable `listitem`s (Enter / Space picks a note). Sketch chart is an `img` whose label lists every label and value; the drawing is `aria-hidden`. Reduced motion: notes and charts are shown at once, `paper-unfold` / `watercolor` fade in, `pencil-sketch` shows the drawing, `crumple` does nothing.
+
+### Fixed
+- the 5.8 theme pack already registers a `paper-fold` effect, so the 8.5 unfold effect is named `paper-unfold` (registering it as `paper-fold` would have overridden the 5.8 theme effect).
+- the sketch chart only sketched itself once, on first view — it now re-sketches on click / `redraw()` (gallery and Store demos replay it).
+- the sticky-wall and sketch-chart gallery / Store demos only animated once on first view — demos now have "Pick a note" / "New data" buttons (wired to `pick()` / `setValues()` + `redraw()`).
+
+## [8.4.0] - 2026-10-09
+
+### Added
+- **2 new components (8.4)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-hud-panel>` — sci-fi HUD panel: angled corners, a glowing frame that draws itself in on first view, header with blinking status light (`title`, `status`, `color`), `<p data-value="72">` rows become animated bar readouts; `boot()` replays the intro, `usa:boot`.
+  - `<usa-radar>` — radar scope: a conic beam sweeps round (`speed` s per turn, `rings`) and targets (`targets="Name:bearing,distance; …"`) light up as the beam passes; `targets` / `setTargets()`, `usa:ping` { name }; `parseTargets()`.
+- **Cyber pack — `motionary/fx/cyber`** (= `motionary/components/fx-cyber`, `registerCyberPack()`, also in `registerEffectPacks()`): `hud-frame` (enter), `scanline-sweep` (attention), `hologram` (loop), `data-decode` (enter). `decodeFrame()`.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- HUD panel is a labelled `region` (its `title`); the frame and bars are `aria-hidden`, the percentage is real text. Radar is an `img` whose label lists every target with its bearing; the sweep only runs on screen. `data-decode` keeps the real text as `aria-label` while it scrambles. Reduced motion: the panel shows at once, the radar is a still scope with all targets lit, `hud-frame` / `data-decode` just show, `scanline-sweep` does nothing, `hologram` is skipped.
+
+### Fixed
+- the 8.4 hologram gallery card id `fx-holo` collided with the 5.x "Holographic card" card (catalog ids must be unique — caught by the showcase catalog test) → renamed `fx-hologram`; a duplicate-id check now runs at staging.
+
+
 ## [8.3.0] - 2026-10-09
 
 ### Added

package/dist/components/fx-cyber.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+const GLYPHS = '01<>/\\[]{}#$%&*+=ABCDEFXYZ';
+/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */
+function decodeFrame(text, k, n, rnd = Math.random) {
+    const done = Math.floor((Math.min(n, Math.max(0, k)) / n) * text.length);
+    let out = text.slice(0, done);
+    for (let i = done; i < text.length; i++)
+        out += /\s/.test(text[i]) ? text[i] : GLYPHS[Math.floor(rnd() * GLYPHS.length)];
+    return out;
+}
+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', overflow: 'hidden', borderRadius: 'inherit' });
+    el.appendChild(o);
+    ctx.onCleanup(() => o.remove());
+    return o;
+};
+const bar = (o, color, h = '2px') => {
+    const b = document.createElement('span');
+    Object.assign(b.style, { position: 'absolute', left: '0', right: '0', top: '0', height: h, background: color, boxShadow: `0 0 10px 2px ${color}` });
+    o.appendChild(b);
+    return b;
+};
+const CYBER_FX = [
+    {
+        name: 'hud-frame',
+        kind: 'enter',
+        description: 'Corner brackets draw in around the element and a scan bar sweeps across it, like a HUD locking on (`color`).',
+        defaults: { color: '#22d3ee', duration: 900 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            ov.style.overflow = 'visible';
+            const runs = [];
+            ['0 0', '100% 0', '0 100%', '100% 100%'].forEach((pos, i) => {
+                const c = document.createElement('span');
+                const [x, y] = pos.split(' ');
+                Object.assign(c.style, { position: 'absolute', width: '14px', height: '14px', left: x === '0' ? '-4px' : 'calc(100% - 10px)', top: y === '0' ? '-4px' : 'calc(100% - 10px)', borderColor: o.color, borderStyle: 'solid', borderWidth: `${y === '0' ? 2 : 0}px ${x !== '0' ? 2 : 0}px ${y !== '0' ? 2 : 0}px ${x === '0' ? 2 : 0}px` });
+                ov.appendChild(c);
+                const dx = x === '0' ? -14 : 14;
+                const dy = y === '0' ? -14 : 14;
+                runs.push(ctx.animate(c, [{ transform: `translate(${dx}px,${dy}px)`, opacity: 0 }, { transform: 'none', opacity: 1, offset: 0.5 }, { transform: 'none', opacity: 1, offset: 0.85 }, { transform: 'none', opacity: 0 }], { duration: o.duration + 500, delay: i * 60, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));
+            });
+            const b = bar(ov, o.color);
+            runs.push(ctx.animate(b, [{ transform: 'translateY(0)', opacity: 0 }, { opacity: 1, offset: 0.1 }, { transform: `translateY(${el.clientHeight || 80}px)`, opacity: 0 }], { duration: o.duration, delay: 250, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined));
+            runs.push(ctx.animate(el, [{ opacity: 0, filter: 'brightness(2) saturate(0)' }, { opacity: 1, filter: 'none' }], { duration: o.duration, easing: 'steps(6, end)', fill: 'backwards' })?.finished.catch(() => undefined));
+            return Promise.all(runs).then(() => ov.remove());
+        },
+    },
+    {
+        name: 'scanline-sweep',
+        kind: 'attention',
+        description: 'A bright horizontal scanline runs down the element (`color`, `passes`).',
+        defaults: { color: 'rgba(34,211,238,.9)', passes: 1, duration: 800 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            const b = bar(ov, o.color, '3px');
+            const a = ctx.animate(b, [{ transform: 'translateY(-4px)' }, { transform: `translateY(${(el.clientHeight || 80) + 4}px)` }], { duration: o.duration, iterations: Math.max(1, Math.min(5, Number(o.passes) || 1)), easing: 'linear' });
+            const end = () => ov.remove();
+            return a ? a.finished.then(end, end) : (end(), undefined);
+        },
+    },
+    {
+        name: 'hologram',
+        kind: 'loop',
+        description: 'A flickering, translucent hologram look with drifting scan bands until the cleanup runs (`color`).',
+        defaults: { color: '#22d3ee', duration: 2400 },
+        run: (el, o, ctx) => {
+            const ov = overlay(el, ctx);
+            ov.style.background = `repeating-linear-gradient(0deg, transparent 0 3px, ${o.color}33 3px 4px)`;
+            ov.style.mixBlendMode = 'screen';
+            const prev = el.style.filter;
+            el.style.filter = `drop-shadow(0 0 6px ${o.color}) saturate(1.4)`;
+            const a = ctx.animate(el, [{ opacity: 0.85 }, { opacity: 0.6, offset: 0.08 }, { opacity: 0.9, offset: 0.12 }, { opacity: 0.8, offset: 0.5 }, { opacity: 0.55, offset: 0.52 }, { opacity: 0.85 }], { duration: o.duration, iterations: Infinity });
+            const b = ctx.animate(ov, [{ backgroundPosition: '0 0' }, { backgroundPosition: '0 40px' }], { duration: 1600, iterations: Infinity, easing: 'linear' });
+            return () => {
+                a?.cancel();
+                b?.cancel();
+                ov.remove();
+                el.style.filter = prev;
+            };
+        },
+    },
+    {
+        name: 'data-decode',
+        kind: 'enter',
+        description: 'The text resolves from random glyphs to the real characters, left to right (`speed` ms per frame).',
+        defaults: { speed: 40, frames: 16 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const text = el.textContent || '';
+            if (!text.trim() || el.children.length)
+                return;
+            const n = Math.max(4, Math.min(60, Number(o.frames) || 16));
+            el.setAttribute('aria-label', text);
+            let k = 0;
+            let timer = 0;
+            const restore = () => {
+                clearTimeout(timer);
+                el.textContent = text;
+                el.removeAttribute('aria-label');
+            };
+            ctx.onCleanup(restore);
+            return new Promise((resolve) => {
+                const step = () => {
+                    if (k > n) {
+                        restore();
+                        return resolve();
+                    }
+                    el.textContent = decodeFrame(text, k++, n);
+                    timer = setTimeout(step, Math.max(10, Number(o.speed) || 40));
+                };
+                step();
+            });
+        },
+    },
+];
+/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */
+function registerCyberPack() {
+    registry.registerEffects(CYBER_FX);
+}
+
+exports.CYBER_FX = CYBER_FX;
+exports.decodeFrame = decodeFrame;
+exports.registerCyberPack = registerCyberPack;
+//# sourceMappingURL=fx-cyber.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-cyber.cjs","sources":["../../src/components/fx2/cyber.ts"],"sourcesContent":["/**\n * 8.4 — Cyber / sci-fi pack (`motionary/fx/cyber`, also `motionary/components/fx-cyber`):\n *\n * - `hud-frame` (enter) — corner brackets draw in around the element and a\n *   scan bar sweeps across it, like a HUD locking on (`color`).\n * - `scanline-sweep` (attention) — a bright horizontal scanline runs down\n *   the element (`color`, `passes`).\n * - `hologram` (loop) — a flickering, translucent cyan hologram look with\n *   drifting scan bands; the cleanup restores the element (`color`).\n * - `data-decode` (enter) — the text resolves from random glyphs to the real\n *   characters, left to right (`speed`).\n *\n * Reduced motion: hud-frame / data-decode just show, scanline-sweep does\n * nothing, hologram is skipped. Overlays are `aria-hidden` and removed.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nconst GLYPHS = '01<>/\\\\[]{}#$%&*+=ABCDEFXYZ';\n/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */\nexport function decodeFrame(text: string, k: number, n: number, rnd: () => number = Math.random): string {\n  const done = Math.floor((Math.min(n, Math.max(0, k)) / n) * text.length);\n  let out = text.slice(0, done);\n  for (let i = done; i < text.length; i++) out += /\\s/.test(text[i]) ? text[i] : GLYPHS[Math.floor(rnd() * GLYPHS.length)];\n  return out;\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', overflow: 'hidden', borderRadius: 'inherit' });\n  el.appendChild(o);\n  ctx.onCleanup(() => o.remove());\n  return o;\n};\nconst bar = (o: HTMLElement, color: string, h = '2px') => {\n  const b = document.createElement('span');\n  Object.assign(b.style, { position: 'absolute', left: '0', right: '0', top: '0', height: h, background: color, boxShadow: `0 0 10px 2px ${color}` });\n  o.appendChild(b);\n  return b;\n};\n\nexport const CYBER_FX: EffectDefinition[] = [\n  {\n    name: 'hud-frame',\n    kind: 'enter',\n    description: 'Corner brackets draw in around the element and a scan bar sweeps across it, like a HUD locking on (`color`).',\n    defaults: { color: '#22d3ee', duration: 900 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      ov.style.overflow = 'visible';\n      const runs: (Promise<unknown> | undefined)[] = [];\n      ['0 0', '100% 0', '0 100%', '100% 100%'].forEach((pos, i) => {\n        const c = document.createElement('span');\n        const [x, y] = pos.split(' ');\n        Object.assign(c.style, { position: 'absolute', width: '14px', height: '14px', left: x === '0' ? '-4px' : 'calc(100% - 10px)', top: y === '0' ? '-4px' : 'calc(100% - 10px)', borderColor: o.color, borderStyle: 'solid', borderWidth: `${y === '0' ? 2 : 0}px ${x !== '0' ? 2 : 0}px ${y !== '0' ? 2 : 0}px ${x === '0' ? 2 : 0}px` });\n        ov.appendChild(c);\n        const dx = x === '0' ? -14 : 14;\n        const dy = y === '0' ? -14 : 14;\n        runs.push(ctx.animate(c, [{ transform: `translate(${dx}px,${dy}px)`, opacity: 0 }, { transform: 'none', opacity: 1, offset: 0.5 }, { transform: 'none', opacity: 1, offset: 0.85 }, { transform: 'none', opacity: 0 }], { duration: o.duration + 500, delay: i * 60, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));\n      });\n      const b = bar(ov, o.color);\n      runs.push(ctx.animate(b, [{ transform: 'translateY(0)', opacity: 0 }, { opacity: 1, offset: 0.1 }, { transform: `translateY(${el.clientHeight || 80}px)`, opacity: 0 }], { duration: o.duration, delay: 250, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined));\n      runs.push(ctx.animate(el, [{ opacity: 0, filter: 'brightness(2) saturate(0)' }, { opacity: 1, filter: 'none' }], { duration: o.duration, easing: 'steps(6, end)', fill: 'backwards' })?.finished.catch(() => undefined));\n      return Promise.all(runs).then(() => ov.remove());\n    },\n  },\n  {\n    name: 'scanline-sweep',\n    kind: 'attention',\n    description: 'A bright horizontal scanline runs down the element (`color`, `passes`).',\n    defaults: { color: 'rgba(34,211,238,.9)', passes: 1, duration: 800 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      const b = bar(ov, o.color, '3px');\n      const a = ctx.animate(b, [{ transform: 'translateY(-4px)' }, { transform: `translateY(${(el.clientHeight || 80) + 4}px)` }], { duration: o.duration, iterations: Math.max(1, Math.min(5, Number(o.passes) || 1)), easing: 'linear' });\n      const end = () => ov.remove();\n      return a ? a.finished.then(end, end) : (end(), undefined);\n    },\n  },\n  {\n    name: 'hologram',\n    kind: 'loop',\n    description: 'A flickering, translucent hologram look with drifting scan bands until the cleanup runs (`color`).',\n    defaults: { color: '#22d3ee', duration: 2400 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const ov = overlay(el, ctx);\n      ov.style.background = `repeating-linear-gradient(0deg, transparent 0 3px, ${o.color}33 3px 4px)`;\n      ov.style.mixBlendMode = 'screen';\n      const prev = el.style.filter;\n      el.style.filter = `drop-shadow(0 0 6px ${o.color}) saturate(1.4)`;\n      const a = ctx.animate(el, [{ opacity: 0.85 }, { opacity: 0.6, offset: 0.08 }, { opacity: 0.9, offset: 0.12 }, { opacity: 0.8, offset: 0.5 }, { opacity: 0.55, offset: 0.52 }, { opacity: 0.85 }], { duration: o.duration, iterations: Infinity });\n      const b = ctx.animate(ov, [{ backgroundPosition: '0 0' }, { backgroundPosition: '0 40px' }], { duration: 1600, iterations: Infinity, easing: 'linear' });\n      return () => {\n        a?.cancel();\n        b?.cancel();\n        ov.remove();\n        el.style.filter = prev;\n      };\n    },\n  },\n  {\n    name: 'data-decode',\n    kind: 'enter',\n    description: 'The text resolves from random glyphs to the real characters, left to right (`speed` ms per frame).',\n    defaults: { speed: 40, frames: 16 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const text = el.textContent || '';\n      if (!text.trim() || el.children.length) return;\n      const n = Math.max(4, Math.min(60, Number(o.frames) || 16));\n      el.setAttribute('aria-label', text);\n      let k = 0;\n      let timer = 0 as unknown as ReturnType<typeof setTimeout>;\n      const restore = () => {\n        clearTimeout(timer);\n        el.textContent = text;\n        el.removeAttribute('aria-label');\n      };\n      ctx.onCleanup(restore);\n      return new Promise<void>((resolve) => {\n        const step = () => {\n          if (k > n) {\n            restore();\n            return resolve();\n          }\n          el.textContent = decodeFrame(text, k++, n);\n          timer = setTimeout(step, Math.max(10, Number(o.speed) || 40));\n        };\n        step();\n      });\n    },\n  },\n];\n\n/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */\nexport function registerCyberPack(): void {\n  registerEffects(CYBER_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+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>;
+}
+
+/**
+ * 8.4 — Cyber / sci-fi pack (`motionary/fx/cyber`, also `motionary/components/fx-cyber`):
+ *
+ * - `hud-frame` (enter) — corner brackets draw in around the element and a
+ *   scan bar sweeps across it, like a HUD locking on (`color`).
+ * - `scanline-sweep` (attention) — a bright horizontal scanline runs down
+ *   the element (`color`, `passes`).
+ * - `hologram` (loop) — a flickering, translucent cyan hologram look with
+ *   drifting scan bands; the cleanup restores the element (`color`).
+ * - `data-decode` (enter) — the text resolves from random glyphs to the real
+ *   characters, left to right (`speed`).
+ *
+ * Reduced motion: hud-frame / data-decode just show, scanline-sweep does
+ * nothing, hologram is skipped. Overlays are `aria-hidden` and removed.
+ */
+
+/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */
+declare function decodeFrame(text: string, k: number, n: number, rnd?: () => number): string;
+declare const CYBER_FX: EffectDefinition[];
+/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */
+declare function registerCyberPack(): void;
+
+export { CYBER_FX, decodeFrame, registerCyberPack };

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

@@ -0,0 +1,66 @@
+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>;
+}
+
+/**
+ * 8.4 — Cyber / sci-fi pack (`motionary/fx/cyber`, also `motionary/components/fx-cyber`):
+ *
+ * - `hud-frame` (enter) — corner brackets draw in around the element and a
+ *   scan bar sweeps across it, like a HUD locking on (`color`).
+ * - `scanline-sweep` (attention) — a bright horizontal scanline runs down
+ *   the element (`color`, `passes`).
+ * - `hologram` (loop) — a flickering, translucent cyan hologram look with
+ *   drifting scan bands; the cleanup restores the element (`color`).
+ * - `data-decode` (enter) — the text resolves from random glyphs to the real
+ *   characters, left to right (`speed`).
+ *
+ * Reduced motion: hud-frame / data-decode just show, scanline-sweep does
+ * nothing, hologram is skipped. Overlays are `aria-hidden` and removed.
+ */
+
+/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */
+declare function decodeFrame(text: string, k: number, n: number, rnd?: () => number): string;
+declare const CYBER_FX: EffectDefinition[];
+/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */
+declare function registerCyberPack(): void;
+
+export { CYBER_FX, decodeFrame, registerCyberPack };

package/dist/components/fx-cyber.js

@@ -0,0 +1,136 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import '../chunks/base-CLuqlLfG.js';
+
+const GLYPHS = '01<>/\\[]{}#$%&*+=ABCDEFXYZ';
+/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */
+function decodeFrame(text, k, n, rnd = Math.random) {
+    const done = Math.floor((Math.min(n, Math.max(0, k)) / n) * text.length);
+    let out = text.slice(0, done);
+    for (let i = done; i < text.length; i++)
+        out += /\s/.test(text[i]) ? text[i] : GLYPHS[Math.floor(rnd() * GLYPHS.length)];
+    return out;
+}
+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', overflow: 'hidden', borderRadius: 'inherit' });
+    el.appendChild(o);
+    ctx.onCleanup(() => o.remove());
+    return o;
+};
+const bar = (o, color, h = '2px') => {
+    const b = document.createElement('span');
+    Object.assign(b.style, { position: 'absolute', left: '0', right: '0', top: '0', height: h, background: color, boxShadow: `0 0 10px 2px ${color}` });
+    o.appendChild(b);
+    return b;
+};
+const CYBER_FX = [
+    {
+        name: 'hud-frame',
+        kind: 'enter',
+        description: 'Corner brackets draw in around the element and a scan bar sweeps across it, like a HUD locking on (`color`).',
+        defaults: { color: '#22d3ee', duration: 900 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            ov.style.overflow = 'visible';
+            const runs = [];
+            ['0 0', '100% 0', '0 100%', '100% 100%'].forEach((pos, i) => {
+                const c = document.createElement('span');
+                const [x, y] = pos.split(' ');
+                Object.assign(c.style, { position: 'absolute', width: '14px', height: '14px', left: x === '0' ? '-4px' : 'calc(100% - 10px)', top: y === '0' ? '-4px' : 'calc(100% - 10px)', borderColor: o.color, borderStyle: 'solid', borderWidth: `${y === '0' ? 2 : 0}px ${x !== '0' ? 2 : 0}px ${y !== '0' ? 2 : 0}px ${x === '0' ? 2 : 0}px` });
+                ov.appendChild(c);
+                const dx = x === '0' ? -14 : 14;
+                const dy = y === '0' ? -14 : 14;
+                runs.push(ctx.animate(c, [{ transform: `translate(${dx}px,${dy}px)`, opacity: 0 }, { transform: 'none', opacity: 1, offset: 0.5 }, { transform: 'none', opacity: 1, offset: 0.85 }, { transform: 'none', opacity: 0 }], { duration: o.duration + 500, delay: i * 60, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));
+            });
+            const b = bar(ov, o.color);
+            runs.push(ctx.animate(b, [{ transform: 'translateY(0)', opacity: 0 }, { opacity: 1, offset: 0.1 }, { transform: `translateY(${el.clientHeight || 80}px)`, opacity: 0 }], { duration: o.duration, delay: 250, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined));
+            runs.push(ctx.animate(el, [{ opacity: 0, filter: 'brightness(2) saturate(0)' }, { opacity: 1, filter: 'none' }], { duration: o.duration, easing: 'steps(6, end)', fill: 'backwards' })?.finished.catch(() => undefined));
+            return Promise.all(runs).then(() => ov.remove());
+        },
+    },
+    {
+        name: 'scanline-sweep',
+        kind: 'attention',
+        description: 'A bright horizontal scanline runs down the element (`color`, `passes`).',
+        defaults: { color: 'rgba(34,211,238,.9)', passes: 1, duration: 800 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const ov = overlay(el, ctx);
+            const b = bar(ov, o.color, '3px');
+            const a = ctx.animate(b, [{ transform: 'translateY(-4px)' }, { transform: `translateY(${(el.clientHeight || 80) + 4}px)` }], { duration: o.duration, iterations: Math.max(1, Math.min(5, Number(o.passes) || 1)), easing: 'linear' });
+            const end = () => ov.remove();
+            return a ? a.finished.then(end, end) : (end(), undefined);
+        },
+    },
+    {
+        name: 'hologram',
+        kind: 'loop',
+        description: 'A flickering, translucent hologram look with drifting scan bands until the cleanup runs (`color`).',
+        defaults: { color: '#22d3ee', duration: 2400 },
+        run: (el, o, ctx) => {
+            const ov = overlay(el, ctx);
+            ov.style.background = `repeating-linear-gradient(0deg, transparent 0 3px, ${o.color}33 3px 4px)`;
+            ov.style.mixBlendMode = 'screen';
+            const prev = el.style.filter;
+            el.style.filter = `drop-shadow(0 0 6px ${o.color}) saturate(1.4)`;
+            const a = ctx.animate(el, [{ opacity: 0.85 }, { opacity: 0.6, offset: 0.08 }, { opacity: 0.9, offset: 0.12 }, { opacity: 0.8, offset: 0.5 }, { opacity: 0.55, offset: 0.52 }, { opacity: 0.85 }], { duration: o.duration, iterations: Infinity });
+            const b = ctx.animate(ov, [{ backgroundPosition: '0 0' }, { backgroundPosition: '0 40px' }], { duration: 1600, iterations: Infinity, easing: 'linear' });
+            return () => {
+                a?.cancel();
+                b?.cancel();
+                ov.remove();
+                el.style.filter = prev;
+            };
+        },
+    },
+    {
+        name: 'data-decode',
+        kind: 'enter',
+        description: 'The text resolves from random glyphs to the real characters, left to right (`speed` ms per frame).',
+        defaults: { speed: 40, frames: 16 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const text = el.textContent || '';
+            if (!text.trim() || el.children.length)
+                return;
+            const n = Math.max(4, Math.min(60, Number(o.frames) || 16));
+            el.setAttribute('aria-label', text);
+            let k = 0;
+            let timer = 0;
+            const restore = () => {
+                clearTimeout(timer);
+                el.textContent = text;
+                el.removeAttribute('aria-label');
+            };
+            ctx.onCleanup(restore);
+            return new Promise((resolve) => {
+                const step = () => {
+                    if (k > n) {
+                        restore();
+                        return resolve();
+                    }
+                    el.textContent = decodeFrame(text, k++, n);
+                    timer = setTimeout(step, Math.max(10, Number(o.speed) || 40));
+                };
+                step();
+            });
+        },
+    },
+];
+/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */
+function registerCyberPack() {
+    registerEffects(CYBER_FX);
+}
+
+export { CYBER_FX, decodeFrame, registerCyberPack };
+//# sourceMappingURL=fx-cyber.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-cyber.js","sources":["../../src/components/fx2/cyber.ts"],"sourcesContent":["/**\n * 8.4 — Cyber / sci-fi pack (`motionary/fx/cyber`, also `motionary/components/fx-cyber`):\n *\n * - `hud-frame` (enter) — corner brackets draw in around the element and a\n *   scan bar sweeps across it, like a HUD locking on (`color`).\n * - `scanline-sweep` (attention) — a bright horizontal scanline runs down\n *   the element (`color`, `passes`).\n * - `hologram` (loop) — a flickering, translucent cyan hologram look with\n *   drifting scan bands; the cleanup restores the element (`color`).\n * - `data-decode` (enter) — the text resolves from random glyphs to the real\n *   characters, left to right (`speed`).\n *\n * Reduced motion: hud-frame / data-decode just show, scanline-sweep does\n * nothing, hologram is skipped. Overlays are `aria-hidden` and removed.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nconst GLYPHS = '01<>/\\\\[]{}#$%&*+=ABCDEFXYZ';\n/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */\nexport function decodeFrame(text: string, k: number, n: number, rnd: () => number = Math.random): string {\n  const done = Math.floor((Math.min(n, Math.max(0, k)) / n) * text.length);\n  let out = text.slice(0, done);\n  for (let i = done; i < text.length; i++) out += /\\s/.test(text[i]) ? text[i] : GLYPHS[Math.floor(rnd() * GLYPHS.length)];\n  return out;\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', overflow: 'hidden', borderRadius: 'inherit' });\n  el.appendChild(o);\n  ctx.onCleanup(() => o.remove());\n  return o;\n};\nconst bar = (o: HTMLElement, color: string, h = '2px') => {\n  const b = document.createElement('span');\n  Object.assign(b.style, { position: 'absolute', left: '0', right: '0', top: '0', height: h, background: color, boxShadow: `0 0 10px 2px ${color}` });\n  o.appendChild(b);\n  return b;\n};\n\nexport const CYBER_FX: EffectDefinition[] = [\n  {\n    name: 'hud-frame',\n    kind: 'enter',\n    description: 'Corner brackets draw in around the element and a scan bar sweeps across it, like a HUD locking on (`color`).',\n    defaults: { color: '#22d3ee', duration: 900 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      ov.style.overflow = 'visible';\n      const runs: (Promise<unknown> | undefined)[] = [];\n      ['0 0', '100% 0', '0 100%', '100% 100%'].forEach((pos, i) => {\n        const c = document.createElement('span');\n        const [x, y] = pos.split(' ');\n        Object.assign(c.style, { position: 'absolute', width: '14px', height: '14px', left: x === '0' ? '-4px' : 'calc(100% - 10px)', top: y === '0' ? '-4px' : 'calc(100% - 10px)', borderColor: o.color, borderStyle: 'solid', borderWidth: `${y === '0' ? 2 : 0}px ${x !== '0' ? 2 : 0}px ${y !== '0' ? 2 : 0}px ${x === '0' ? 2 : 0}px` });\n        ov.appendChild(c);\n        const dx = x === '0' ? -14 : 14;\n        const dy = y === '0' ? -14 : 14;\n        runs.push(ctx.animate(c, [{ transform: `translate(${dx}px,${dy}px)`, opacity: 0 }, { transform: 'none', opacity: 1, offset: 0.5 }, { transform: 'none', opacity: 1, offset: 0.85 }, { transform: 'none', opacity: 0 }], { duration: o.duration + 500, delay: i * 60, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));\n      });\n      const b = bar(ov, o.color);\n      runs.push(ctx.animate(b, [{ transform: 'translateY(0)', opacity: 0 }, { opacity: 1, offset: 0.1 }, { transform: `translateY(${el.clientHeight || 80}px)`, opacity: 0 }], { duration: o.duration, delay: 250, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined));\n      runs.push(ctx.animate(el, [{ opacity: 0, filter: 'brightness(2) saturate(0)' }, { opacity: 1, filter: 'none' }], { duration: o.duration, easing: 'steps(6, end)', fill: 'backwards' })?.finished.catch(() => undefined));\n      return Promise.all(runs).then(() => ov.remove());\n    },\n  },\n  {\n    name: 'scanline-sweep',\n    kind: 'attention',\n    description: 'A bright horizontal scanline runs down the element (`color`, `passes`).',\n    defaults: { color: 'rgba(34,211,238,.9)', passes: 1, duration: 800 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const ov = overlay(el, ctx);\n      const b = bar(ov, o.color, '3px');\n      const a = ctx.animate(b, [{ transform: 'translateY(-4px)' }, { transform: `translateY(${(el.clientHeight || 80) + 4}px)` }], { duration: o.duration, iterations: Math.max(1, Math.min(5, Number(o.passes) || 1)), easing: 'linear' });\n      const end = () => ov.remove();\n      return a ? a.finished.then(end, end) : (end(), undefined);\n    },\n  },\n  {\n    name: 'hologram',\n    kind: 'loop',\n    description: 'A flickering, translucent hologram look with drifting scan bands until the cleanup runs (`color`).',\n    defaults: { color: '#22d3ee', duration: 2400 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const ov = overlay(el, ctx);\n      ov.style.background = `repeating-linear-gradient(0deg, transparent 0 3px, ${o.color}33 3px 4px)`;\n      ov.style.mixBlendMode = 'screen';\n      const prev = el.style.filter;\n      el.style.filter = `drop-shadow(0 0 6px ${o.color}) saturate(1.4)`;\n      const a = ctx.animate(el, [{ opacity: 0.85 }, { opacity: 0.6, offset: 0.08 }, { opacity: 0.9, offset: 0.12 }, { opacity: 0.8, offset: 0.5 }, { opacity: 0.55, offset: 0.52 }, { opacity: 0.85 }], { duration: o.duration, iterations: Infinity });\n      const b = ctx.animate(ov, [{ backgroundPosition: '0 0' }, { backgroundPosition: '0 40px' }], { duration: 1600, iterations: Infinity, easing: 'linear' });\n      return () => {\n        a?.cancel();\n        b?.cancel();\n        ov.remove();\n        el.style.filter = prev;\n      };\n    },\n  },\n  {\n    name: 'data-decode',\n    kind: 'enter',\n    description: 'The text resolves from random glyphs to the real characters, left to right (`speed` ms per frame).',\n    defaults: { speed: 40, frames: 16 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const text = el.textContent || '';\n      if (!text.trim() || el.children.length) return;\n      const n = Math.max(4, Math.min(60, Number(o.frames) || 16));\n      el.setAttribute('aria-label', text);\n      let k = 0;\n      let timer = 0 as unknown as ReturnType<typeof setTimeout>;\n      const restore = () => {\n        clearTimeout(timer);\n        el.textContent = text;\n        el.removeAttribute('aria-label');\n      };\n      ctx.onCleanup(restore);\n      return new Promise<void>((resolve) => {\n        const step = () => {\n          if (k > n) {\n            restore();\n            return resolve();\n          }\n          el.textContent = decodeFrame(text, k++, n);\n          timer = setTimeout(step, Math.max(10, Number(o.speed) || 40));\n        };\n        step();\n      });\n    },\n  },\n];\n\n/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */\nexport function registerCyberPack(): void {\n  registerEffects(CYBER_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx-paper.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+/** A deterministic PRNG in [0, 1) from a seed (8.5). */
+function paperRandom(seed) {
+    let s = Math.abs(Math.round(seed * 1000)) % 233280 || 11;
+    return () => (s = (s * 9301 + 49297) % 233280) / 233280;
+}
+/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */
+function roughLine(x1, y1, x2, y2, seed = 1, amp = 1.5) {
+    const r = paperRandom(seed);
+    const j = () => (r() - 0.5) * 2 * amp;
+    const mx = (x1 + x2) / 2 + j() * 1.5;
+    const my = (y1 + y2) / 2 + j() * 1.5;
+    const f = (n) => Math.round(n * 10) / 10;
+    return `M${f(x1 + j())} ${f(y1 + j())} Q${f(mx)} ${f(my)} ${f(x2 + j())} ${f(y2 + j())}`;
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
+const PAPER_FX = [
+    {
+        name: 'paper-unfold',
+        kind: 'enter',
+        description: 'The element unfolds like a folded sheet of paper, with a soft crease shadow (`folds`).',
+        defaults: { duration: 900, folds: 2 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const n = Math.max(1, Math.min(4, Math.round(Number(o.folds) || 2)));
+            const frames = [{ transform: 'perspective(800px) rotateX(-90deg)', opacity: 0, filter: 'brightness(.7)', offset: 0 }];
+            for (let i = 1; i <= n; i++)
+                frames.push({ transform: `perspective(800px) rotateX(${i % 2 ? 25 : -12}deg) scaleY(${(0.5 + (0.5 * i) / (n + 1)).toFixed(2)})`, opacity: 1, filter: 'brightness(.85)', offset: (i / (n + 1)) * 0.9 });
+            frames.push({ transform: 'none', opacity: 1, filter: 'none', offset: 1 });
+            const prev = el.style.transformOrigin;
+            el.style.transformOrigin = 'top center';
+            ctx.onCleanup(() => (el.style.transformOrigin = prev));
+            return ctx.animate(el, frames, { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'pencil-sketch',
+        kind: 'enter',
+        description: 'SVG strokes inside are sketched in with a slightly wobbly pencil, one after another (`duration`, `stagger`).',
+        defaults: { duration: 700, stagger: 120 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const strokes = Array.from(el.querySelectorAll('path, line, polyline, rect, circle, ellipse'));
+            const runs = strokes.map((p, i) => {
+                let len = 200;
+                try {
+                    len = p.getTotalLength?.() || 200;
+                }
+                catch {
+                    /* not rendered */
+                }
+                const prev = p.style.strokeDasharray;
+                p.style.strokeDasharray = `${len}`;
+                ctx.onCleanup(() => (p.style.strokeDasharray = prev));
+                return ctx.animate(p, [{ strokeDashoffset: `${len}`, transform: 'translate(0.6px,-0.4px)' }, { transform: 'translate(-0.5px,0.5px)', offset: 0.5 }, { strokeDashoffset: '0', transform: 'none' }], { duration: o.duration, delay: i * (Number(o.stagger) || 0), easing: 'cubic-bezier(.5,.1,.4,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+            });
+            return Promise.all(runs).then(() => undefined);
+        },
+    },
+    {
+        name: 'watercolor',
+        kind: 'enter',
+        description: 'The element bleeds in like wet watercolour — blurred and saturated, spreading from the middle — then dries (`duration`).',
+        defaults: { duration: 1400 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            return ctx.animate(el, [
+                { opacity: 0, filter: 'blur(10px) saturate(2.2)', clipPath: 'circle(8% at 50% 50%)' },
+                { opacity: 0.9, filter: 'blur(4px) saturate(1.8)', clipPath: 'circle(55% at 48% 52%)', offset: 0.5 },
+                { opacity: 1, filter: 'blur(0) saturate(1)', clipPath: 'circle(150% at 50% 50%)' },
+            ], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'crumple',
+        kind: 'attention',
+        description: 'The element scrunches like crumpled paper and springs back flat.',
+        defaults: { duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [
+                { transform: 'none' },
+                { transform: 'scale(.82,.9) rotate(-4deg) skewX(6deg)', filter: 'brightness(.9)', offset: 0.3 },
+                { transform: 'scale(.9,.8) rotate(3deg) skewY(-5deg)', offset: 0.5 },
+                { transform: 'scale(1.04) rotate(-1deg)', filter: 'none', offset: 0.8 },
+                { transform: 'none' },
+            ], { duration: o.duration, easing: 'ease-in-out' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */
+function registerPaperPack() {
+    registry.registerEffects(PAPER_FX);
+}
+
+exports.PAPER_FX = PAPER_FX;
+exports.paperRandom = paperRandom;
+exports.registerPaperPack = registerPaperPack;
+exports.roughLine = roughLine;
+//# sourceMappingURL=fx-paper.cjs.map