use-scroll-animate 8.2.0 → 8.4.0

package/CHANGELOG.md

@@ -7,6 +7,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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
+- **2 new components (8.3)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-organic-card>` — card with a soft, living blob outline: breathes slowly while on screen, morphs on hover (`morph(seed)`), `tint` leaf · ocean · petal · sand, `seed` for the starting shape.
+  - `<usa-liquid-nav>` — navigation bar with a liquid-drop indicator that stretches towards the next item and settles with a wobble (gooey SVG filter); children are links / buttons, `aria-current="page"`, `value`, arrow keys, `label`; `usa:change` { index, item }.
+- **Organic pack — `motionary/fx/organic`** (= `motionary/components/fx-organic`, `registerOrganicPack()`, also in `registerEffectPacks()`): `vine-grow` (enter), `bloom` (enter), `water-drop` (attention), `breathe` (loop). `blobRadius()`.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails; Animation Store 343 → 347 items.
+
+### Accessibility
+- Liquid nav is a labelled `navigation` that keeps `aria-current="page"` on the active item and moves focus with ← / →; the drop is `aria-hidden`. Organic card keeps your content and shows a focus ring when something inside is focused. Reduced motion: static blob, the drop jumps, `vine-grow` shows the vine, `bloom` fades in, `water-drop` does nothing, `breathe` is skipped.
+
 ## [8.2.0] - 2026-10-08
 
 ### 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":";;;;;AAkBA,MAAM,MAAM,GAAG,6BAA6B;AAC5C;AACM,SAAU,WAAW,CAAC,IAAY,EAAE,CAAS,EAAE,CAAS,EAAE,GAAA,GAAoB,IAAI,CAAC,MAAM,EAAA;AAC7F,IAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;IACxE,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC;AAC7B,IAAA,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE;AAAE,QAAA,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AACxH,IAAA,OAAO,GAAG;AACZ;AAEA,MAAM,OAAO,GAAG,CAAC,EAAe,EAAE,GAAkB,KAAI;IACtD,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ;AAC9B,QAAA,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;AAC9B,QAAA,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IACjD;IACA,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AACxC,IAAA,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AACrC,IAAA,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAChI,IAAA,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACjB,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC;AAC/B,IAAA,OAAO,CAAC;AACV,CAAC;AACD,MAAM,GAAG,GAAG,CAAC,CAAc,EAAE,KAAa,EAAE,CAAC,GAAG,KAAK,KAAI;IACvD,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AACxC,IAAA,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA,aAAA,EAAgB,KAAK,CAAA,CAAE,EAAE,CAAC;AACnJ,IAAA,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;AAChB,IAAA,OAAO,CAAC;AACV,CAAC;AAEM,MAAM,QAAQ,GAAuB;AAC1C,IAAA;AACE,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,8GAA8G;QAC3H,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE;QAC7C,GAAG,EAAE,CAAC,EAAe,EAAE,CAAM,EAAE,GAAkB,KAAI;YACnD,IAAI,GAAG,CAAC,OAAO;gBAAE;YACjB,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,GAAG,CAAC;AAC3B,YAAA,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS;YAC7B,MAAM,IAAI,GAAqC,EAAE;AACjD,YAAA,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;gBAC1D,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AACxC,gBAAA,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;gBAC7B,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,GAAG,GAAG,MAAM,GAAG,mBAAmB,EAAE,GAAG,EAAE,CAAC,KAAK,GAAG,GAAG,MAAM,GAAG,mBAAmB,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA,EAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA,GAAA,EAAM,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA,GAAA,EAAM,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA,EAAA,CAAI,EAAE,CAAC;AACtU,gBAAA,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;AACjB,gBAAA,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,GAAG,GAAG,EAAE;AAC/B,gBAAA,MAAM,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,GAAG,GAAG,EAAE;gBAC/B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA,GAAA,EAAM,EAAE,CAAA,GAAA,CAAK,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,GAAG,GAAG,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC,CAAC;AACjV,YAAA,CAAC,CAAC;YACF,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,YAAY,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC,CAAC;YAC1R,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,2BAA2B,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC,CAAC;AACxN,YAAA,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC;QAClD,CAAC;AACF,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,gBAAgB;AACtB,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,WAAW,EAAE,yEAAyE;AACtF,QAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE;QACpE,GAAG,EAAE,CAAC,EAAe,EAAE,CAAM,EAAE,GAAkB,KAAI;YACnD,IAAI,GAAG,CAAC,OAAO;gBAAE;YACjB,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,GAAG,CAAC;AAC3B,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC;AACjC,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,EAAE,EAAE,SAAS,EAAE,CAAA,WAAA,EAAc,CAAC,EAAE,CAAC,YAAY,IAAI,EAAE,IAAI,CAAC,CAAA,GAAA,CAAK,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;YACrO,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC,MAAM,EAAE;YAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,EAAE,EAAE,SAAS,CAAC;QAC3D,CAAC;AACF,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,WAAW,EAAE,oGAAoG;QACjH,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC9C,GAAG,EAAE,CAAC,EAAe,EAAE,CAAM,EAAE,GAAkB,KAAI;YACnD,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,GAAG,CAAC;YAC3B,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,sDAAsD,CAAC,CAAC,KAAK,CAAA,WAAA,CAAa;AAChG,YAAA,EAAE,CAAC,KAAK,CAAC,YAAY,GAAG,QAAQ;AAChC,YAAA,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM;YAC5B,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,uBAAuB,CAAC,CAAC,KAAK,CAAA,eAAA,CAAiB;AACjE,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AACjP,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AACxJ,YAAA,OAAO,MAAK;gBACV,CAAC,EAAE,MAAM,EAAE;gBACX,CAAC,EAAE,MAAM,EAAE;gBACX,EAAE,CAAC,MAAM,EAAE;AACX,gBAAA,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI;AACxB,YAAA,CAAC;QACH,CAAC;AACF,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,oGAAoG;QACjH,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACnC,GAAG,EAAE,CAAC,EAAe,EAAE,CAAM,EAAE,GAAkB,KAAI;YACnD,IAAI,GAAG,CAAC,OAAO;gBAAE;AACjB,YAAA,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM;gBAAE;YACxC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;AAC3D,YAAA,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC;YACnC,IAAI,CAAC,GAAG,CAAC;YACT,IAAI,KAAK,GAAG,CAA6C;YACzD,MAAM,OAAO,GAAG,MAAK;gBACnB,YAAY,CAAC,KAAK,CAAC;AACnB,gBAAA,EAAE,CAAC,WAAW,GAAG,IAAI;AACrB,gBAAA,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC;AAClC,YAAA,CAAC;AACD,YAAA,GAAG,CAAC,SAAS,CAAC,OAAO,CAAC;AACtB,YAAA,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,KAAI;gBACnC,MAAM,IAAI,GAAG,MAAK;AAChB,oBAAA,IAAI,CAAC,GAAG,CAAC,EAAE;AACT,wBAAA,OAAO,EAAE;wBACT,OAAO,OAAO,EAAE;oBAClB;AACA,oBAAA,EAAE,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;oBAC1C,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;AAC/D,gBAAA,CAAC;AACD,gBAAA,IAAI,EAAE;AACR,YAAA,CAAC,CAAC;QACJ,CAAC;AACF,KAAA;;AAGH;SACgB,iBAAiB,GAAA;IAC/BA,wBAAe,CAAC,QAAQ,CAAC;AAC3B;;;;;;"}

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-organic.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+/** A blob border-radius ("63% 37% 54% 46% / 55% 48% 52% 45%") from a seed (8.3). */
+function blobRadius(seed) {
+    let s = Math.abs(Math.round(seed * 1000)) % 233280 || 7;
+    const r = () => 30 + ((s = (s * 9301 + 49297) % 233280) / 233280) * 40;
+    const a = [r(), r(), r(), r()].map(Math.round);
+    const b = [r(), r(), r(), r()].map(Math.round);
+    return `${a[0]}% ${100 - a[0]}% ${a[2]}% ${100 - a[2]}% / ${b[0]}% ${b[1]}% ${100 - b[1]}% ${100 - b[0]}%`;
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
+const ORGANIC_FX = [
+    {
+        name: 'vine-grow',
+        kind: 'enter',
+        description: 'SVG paths grow along their length like a vine; `[data-leaf]` / circles pop in along the way (`duration`).',
+        defaults: { duration: 1600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const paths = Array.from(el.querySelectorAll('path, polyline, line'));
+            const leaves = Array.from(el.querySelectorAll('[data-leaf], circle, ellipse'));
+            const runs = paths.map((p) => {
+                let len = 300;
+                try {
+                    len = p.getTotalLength?.() || 300;
+                }
+                catch {
+                    /* not rendered */
+                }
+                const prev = p.style.strokeDasharray;
+                p.style.strokeDasharray = `${len}`;
+                ctx.onCleanup(() => (p.style.strokeDasharray = prev));
+                return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, easing: 'cubic-bezier(.4,.1,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+            });
+            leaves.forEach((l, i) => {
+                l.style.transformBox = 'fill-box';
+                l.style.transformOrigin = 'center';
+                runs.push(ctx.animate(l, [{ transform: 'scale(0) rotate(-40deg)', opacity: 0 }, { transform: 'scale(1.2) rotate(8deg)', opacity: 1, offset: 0.7 }, { transform: 'none', opacity: 1 }], { duration: 500, delay: (o.duration * (i + 1)) / (leaves.length + 1), easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));
+            });
+            return Promise.all(runs).then(() => undefined);
+        },
+    },
+    {
+        name: 'bloom',
+        kind: 'enter',
+        description: "The element's children unfold from the centre like petals, or the element blooms open (`stagger`).",
+        defaults: { stagger: 70, duration: 700 },
+        run: (el, o, ctx) => {
+            const kids = Array.from(el.children);
+            const items = kids.length > 1 ? kids : [el];
+            return Promise.all(items.map((k, i) => {
+                if (ctx.reduced)
+                    return fade(k, ctx);
+                const rot = (i % 2 ? 1 : -1) * (25 + i * 6);
+                return ctx.animate(k, [{ transform: `scale(0) rotate(${rot}deg)`, opacity: 0 }, { transform: 'scale(1.1) rotate(-3deg)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, delay: i * o.stagger, easing: 'cubic-bezier(.3,1.3,.5,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+            })).then(() => undefined);
+        },
+    },
+    {
+        name: 'water-drop',
+        kind: 'attention',
+        description: 'The element dips like a drop hit water and concentric ripples spread out (`rings`, `color`).',
+        defaults: { rings: 3, color: 'rgba(14,165,233,.55)', duration: 1200 },
+        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 runs = [ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(.94, .9) translateY(3px)', offset: 0.2 }, { transform: 'scale(1.03, 1.05)', offset: 0.45 }, { transform: 'none' }], { duration: 700, easing: 'ease-out' })?.finished.catch(() => undefined)];
+            const n = Math.max(1, Math.min(5, Number(o.rings) || 3));
+            for (let i = 0; i < n; i++) {
+                const r = document.createElement('span');
+                r.setAttribute('aria-hidden', 'true');
+                Object.assign(r.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '2 / 1', borderRadius: '50%', border: `2px solid ${o.color}`, translate: '-50% -50%', pointerEvents: 'none' });
+                el.appendChild(r);
+                const end = () => r.remove();
+                ctx.onCleanup(end);
+                const a = ctx.animate(r, [{ transform: 'scale(.2)', opacity: 1 }, { transform: 'scale(1.9)', opacity: 0 }], { duration: o.duration, delay: 120 + i * 220, easing: 'ease-out', fill: 'backwards' });
+                runs.push(a ? a.finished.then(end, end) : (end(), undefined));
+            }
+            return Promise.all(runs).then(() => undefined);
+        },
+    },
+    {
+        name: 'breathe',
+        kind: 'loop',
+        description: 'A slow organic morph of shape and scale, like a living blob, until the cleanup runs (`duration`).',
+        defaults: { duration: 6000 },
+        run: (el, o, ctx) => {
+            const prev = el.style.borderRadius;
+            const frames = [0, 1, 2, 3, 0].map((i, k) => ({ borderRadius: blobRadius(i + 1), transform: `scale(${k % 2 ? 1.04 : 1}) rotate(${k % 2 ? 4 : -2}deg)`, offset: k / 4 }));
+            const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => {
+                a?.cancel();
+                el.style.borderRadius = prev;
+            };
+        },
+    },
+];
+/** Register vine-grow, bloom, water-drop and breathe (8.3). */
+function registerOrganicPack() {
+    registry.registerEffects(ORGANIC_FX);
+}
+
+exports.ORGANIC_FX = ORGANIC_FX;
+exports.blobRadius = blobRadius;
+exports.registerOrganicPack = registerOrganicPack;
+//# sourceMappingURL=fx-organic.cjs.map