use-scroll-animate 7.7.0 → 7.8.0

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [7.8.0] - 2026-10-08
+
+### Added
+- **3 new components (7.8)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-chat-composer>` — AI chat input: the textarea grows with its text (up to `rows`, default 6), Enter sends / Shift+Enter new line, the send button pops when there is text and morphs into Stop while `busy`, when a conic "thinking" glow runs round the composer. `usa:send` { text } (cancelable), `usa:stop`; `placeholder`, `label`, `value`, `busy`, `send()`, `clear()`.
+  - `<usa-suggestion-chips>` — follow-up prompt chips from `items="a|b|c"` (or child elements): slide in one after another, picking pulses the chip and emits `usa:pick` { text, index }; `dismiss` fades the others; `setItems()` / `items`; arrow keys. `parseChips()`.
+  - `<usa-voice-button>` — push-to-talk mic: toggles `listening` (`usa:start` / `usa:stop`), a halo breathes and `bars` (3–9) wave; set `level` (0–1) from an analyser / speech API and both follow it. `toggle()`; `waveBars()`.
+- **AI UI motion — `motionary/fx/ai`** (= `motionary/components/fx-ai`, `registerAiPack()`, also in `registerEffectPacks()`): `stream-text` (enter), `thinking-glow` (loop), `voice-wave` (attention), `gen-skeleton` (enter). `splitWords()`.
+- Showcase: 5 new gallery cards with copyable code, live demos and live Store thumbnails; Animation Store 326 → 331 items.
+
+### Accessibility
+- Composer: labelled textarea, the button's `aria-label` switches Send ↔ Stop generating. Chips: labelled list of real buttons, arrow-key navigation, dismissed chips are disabled. Voice button: a real `<button aria-pressed>`. `stream-text` restores the original text nodes when it finishes (screen readers read the full text). Reduced motion: no glow, pop, slide, halo or wave; `stream-text` shows the text at once, `thinking-glow` is skipped, `voice-wave` does nothing, `gen-skeleton` fades in.
+
 ## [7.7.0] - 2026-10-08
 
 ### Added

package/dist/components/fx-ai.cjs

@@ -0,0 +1,130 @@
+'use strict';
+
+var registry = require('../chunks/registry-DehBVRDV.cjs');
+require('../chunks/base-BaQV-2ha.cjs');
+
+/** Split text into words, keeping the whitespace after each (7.8). */
+function splitWords(text) {
+    return text.match(/\S+\s*|\s+/g) || [];
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
+function textNodes(el) {
+    const out = [];
+    const walk = (n) => n.childNodes.forEach((c) => (c.nodeType === 3 ? (c.textContent || '').trim() && out.push(c) : c.nodeType === 1 && walk(c)));
+    walk(el);
+    return out;
+}
+const AI_FX = [
+    {
+        name: 'stream-text',
+        kind: 'enter',
+        description: 'The text appears word by word like a streamed LLM reply, with a blinking caret (`speed` ms per word).',
+        defaults: { speed: 45 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const speed = Math.max(5, Number(o.speed) || 45);
+            const spans = [];
+            const restores = [];
+            for (const t of textNodes(el)) {
+                const wrap = document.createElement('span');
+                wrap.setAttribute('data-usa-stream', '');
+                for (const w of splitWords(t.textContent || '')) {
+                    const s = document.createElement('span');
+                    s.textContent = w;
+                    s.style.opacity = '0';
+                    wrap.appendChild(s);
+                    spans.push(s);
+                }
+                t.parentNode.replaceChild(wrap, t);
+                restores.push(() => wrap.isConnected && wrap.replaceWith(t));
+            }
+            const caret = document.createElement('span');
+            caret.setAttribute('aria-hidden', 'true');
+            caret.textContent = '▍';
+            Object.assign(caret.style, { opacity: '.7', marginLeft: '1px' });
+            el.appendChild(caret);
+            const blink = ctx.animate(caret, [{ opacity: 0.8 }, { opacity: 0 }], { duration: 500, iterations: Infinity, direction: 'alternate' });
+            let done = false;
+            const finish = () => {
+                if (done)
+                    return;
+                done = true;
+                blink?.cancel();
+                caret.remove();
+                restores.forEach((r) => r());
+            };
+            ctx.onCleanup(finish);
+            const runs = spans.map((s, i) => {
+                const a = ctx.animate(s, [{ opacity: 0, filter: 'blur(3px)' }, { opacity: 1, filter: 'none' }], { duration: 220, delay: i * speed, fill: 'both', easing: 'ease-out' });
+                if (!a)
+                    s.style.opacity = '';
+                return a?.finished.catch(() => undefined);
+            });
+            return Promise.all(runs).then(finish);
+        },
+    },
+    {
+        name: 'thinking-glow',
+        kind: 'loop',
+        description: 'A soft colour glow breathes and drifts round the element while a model is "thinking" (`colors`, comma-separated). Stops on cleanup.',
+        defaults: { colors: '#6366f1,#ec4899,#22d3ee', duration: 2400 },
+        run: (el, o, ctx) => {
+            const cs = String(o.colors).split(',').map((c) => c.trim()).filter(Boolean);
+            const c = cs.length ? cs : ['#6366f1'];
+            const frames = c.map((col, i) => ({ boxShadow: `0 0 ${i % 2 ? 26 : 14}px ${i % 2 ? 4 : 1}px ${col}`, offset: i / c.length }));
+            frames.push({ boxShadow: `0 0 14px 1px ${c[0]}`, offset: 1 });
+            const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => a?.cancel();
+        },
+    },
+    {
+        name: 'voice-wave',
+        kind: 'attention',
+        description: "The element's children bounce in a wave like voice level bars, or the element pulses when it has none (`cycles`).",
+        defaults: { cycles: 2, duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const kids = Array.from(el.children);
+            const n = Math.max(1, Math.min(6, Number(o.cycles) || 2));
+            if (!kids.length)
+                return ctx.animate(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: o.duration, iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined);
+            return Promise.all(kids.map((k, i) => ctx.animate(k, [{ transform: 'scaleY(1)' }, { transform: 'scaleY(1.9)' }, { transform: 'scaleY(.6)' }, { transform: 'scaleY(1)' }], { duration: o.duration, delay: i * (o.duration / (kids.length * 2)), iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined))).then(() => undefined);
+        },
+    },
+    {
+        name: 'gen-skeleton',
+        kind: 'enter',
+        description: 'A shimmering skeleton covers the element, then dissolves to reveal the generated content (`hold` ms).',
+        defaults: { hold: 900, duration: 500 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const sk = document.createElement('span');
+            sk.setAttribute('aria-hidden', 'true');
+            Object.assign(sk.style, { position: 'absolute', inset: '0', borderRadius: 'inherit', pointerEvents: 'none', background: 'linear-gradient(100deg,#e2e8f0 30%,#f8fafc 50%,#e2e8f0 70%)', backgroundSize: '200% 100%', zIndex: '1' });
+            el.appendChild(sk);
+            const end = () => sk.remove();
+            ctx.onCleanup(end);
+            const hold = Math.max(0, Number(o.hold) || 0);
+            ctx.animate(sk, [{ backgroundPosition: '120% 0' }, { backgroundPosition: '-20% 0' }], { duration: 900, iterations: Math.max(1, Math.ceil(hold / 900)) });
+            const a = ctx.animate(sk, [{ opacity: 1 }, { opacity: 0 }], { duration: o.duration, delay: hold, fill: 'both', easing: 'ease-out' });
+            return a ? a.finished.then(end, end) : (end(), undefined);
+        },
+    },
+];
+/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */
+function registerAiPack() {
+    registry.registerEffects(AI_FX);
+}
+
+exports.AI_FX = AI_FX;
+exports.registerAiPack = registerAiPack;
+exports.splitWords = splitWords;
+//# sourceMappingURL=fx-ai.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-ai.cjs","sources":["../../src/components/fx2/ai.ts"],"sourcesContent":["/**\n * 7.8 — AI UI motion (`motionary/fx/ai`, also `motionary/components/fx-ai`):\n *\n * - `stream-text` (enter) — the element's text appears word by word, like a\n *   streamed LLM reply, with a blinking caret at the end (`speed` ms/word).\n * - `thinking-glow` (loop) — a soft colour glow breathes and drifts round the\n *   element while a model is \"thinking\" (`colors`); the cleanup stops it.\n * - `voice-wave` (attention) — the element's children bounce in a wave like\n *   voice level bars (or the element pulses when it has none) (`cycles`).\n * - `gen-skeleton` (enter) — a shimmering skeleton covers the element, then\n *   dissolves to reveal the generated content (`hold`).\n *\n * Reduced motion: stream-text shows the text, thinking-glow is skipped,\n * voice-wave does nothing, gen-skeleton fades in.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Split text into words, keeping the whitespace after each (7.8). */\nexport function splitWords(text: string): string[] {\n  return text.match(/\\S+\\s*|\\s+/g) || [];\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nfunction textNodes(el: Node): Text[] {\n  const out: Text[] = [];\n  const walk = (n: Node) => n.childNodes.forEach((c) => (c.nodeType === 3 ? (c.textContent || '').trim() && out.push(c as Text) : c.nodeType === 1 && walk(c)));\n  walk(el);\n  return out;\n}\n\nexport const AI_FX: EffectDefinition[] = [\n  {\n    name: 'stream-text',\n    kind: 'enter',\n    description: 'The text appears word by word like a streamed LLM reply, with a blinking caret (`speed` ms per word).',\n    defaults: { speed: 45 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const speed = Math.max(5, Number(o.speed) || 45);\n      const spans: HTMLElement[] = [];\n      const restores: (() => void)[] = [];\n      for (const t of textNodes(el)) {\n        const wrap = document.createElement('span');\n        wrap.setAttribute('data-usa-stream', '');\n        for (const w of splitWords(t.textContent || '')) {\n          const s = document.createElement('span');\n          s.textContent = w;\n          s.style.opacity = '0';\n          wrap.appendChild(s);\n          spans.push(s);\n        }\n        (t.parentNode as Node).replaceChild(wrap, t);\n        restores.push(() => wrap.isConnected && wrap.replaceWith(t));\n      }\n      const caret = document.createElement('span');\n      caret.setAttribute('aria-hidden', 'true');\n      caret.textContent = '▍';\n      Object.assign(caret.style, { opacity: '.7', marginLeft: '1px' });\n      el.appendChild(caret);\n      const blink = ctx.animate(caret, [{ opacity: 0.8 }, { opacity: 0 }], { duration: 500, iterations: Infinity, direction: 'alternate' });\n      let done = false;\n      const finish = () => {\n        if (done) return;\n        done = true;\n        blink?.cancel();\n        caret.remove();\n        restores.forEach((r) => r());\n      };\n      ctx.onCleanup(finish);\n      const runs = spans.map((s, i) => {\n        const a = ctx.animate(s, [{ opacity: 0, filter: 'blur(3px)' }, { opacity: 1, filter: 'none' }], { duration: 220, delay: i * speed, fill: 'both', easing: 'ease-out' });\n        if (!a) s.style.opacity = '';\n        return a?.finished.catch(() => undefined);\n      });\n      return Promise.all(runs).then(finish);\n    },\n  },\n  {\n    name: 'thinking-glow',\n    kind: 'loop',\n    description: 'A soft colour glow breathes and drifts round the element while a model is \"thinking\" (`colors`, comma-separated). Stops on cleanup.',\n    defaults: { colors: '#6366f1,#ec4899,#22d3ee', duration: 2400 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const cs = String(o.colors).split(',').map((c) => c.trim()).filter(Boolean);\n      const c = cs.length ? cs : ['#6366f1'];\n      const frames: Keyframe[] = c.map((col, i) => ({ boxShadow: `0 0 ${i % 2 ? 26 : 14}px ${i % 2 ? 4 : 1}px ${col}`, offset: i / c.length }));\n      frames.push({ boxShadow: `0 0 14px 1px ${c[0]}`, offset: 1 });\n      const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => a?.cancel();\n    },\n  },\n  {\n    name: 'voice-wave',\n    kind: 'attention',\n    description: \"The element's children bounce in a wave like voice level bars, or the element pulses when it has none (`cycles`).\",\n    defaults: { cycles: 2, duration: 700 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const kids = Array.from(el.children) as HTMLElement[];\n      const n = Math.max(1, Math.min(6, Number(o.cycles) || 2));\n      if (!kids.length) return ctx.animate(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: o.duration, iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined);\n      return Promise.all(\n        kids.map((k, i) =>\n          ctx.animate(k, [{ transform: 'scaleY(1)' }, { transform: 'scaleY(1.9)' }, { transform: 'scaleY(.6)' }, { transform: 'scaleY(1)' }], { duration: o.duration, delay: i * (o.duration / (kids.length * 2)), iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined)\n        )\n      ).then(() => undefined);\n    },\n  },\n  {\n    name: 'gen-skeleton',\n    kind: 'enter',\n    description: 'A shimmering skeleton covers the element, then dissolves to reveal the generated content (`hold` ms).',\n    defaults: { hold: 900, duration: 500 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\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 sk = document.createElement('span');\n      sk.setAttribute('aria-hidden', 'true');\n      Object.assign(sk.style, { position: 'absolute', inset: '0', borderRadius: 'inherit', pointerEvents: 'none', background: 'linear-gradient(100deg,#e2e8f0 30%,#f8fafc 50%,#e2e8f0 70%)', backgroundSize: '200% 100%', zIndex: '1' });\n      el.appendChild(sk);\n      const end = () => sk.remove();\n      ctx.onCleanup(end);\n      const hold = Math.max(0, Number(o.hold) || 0);\n      ctx.animate(sk, [{ backgroundPosition: '120% 0' }, { backgroundPosition: '-20% 0' }], { duration: 900, iterations: Math.max(1, Math.ceil(hold / 900)) });\n      const a = ctx.animate(sk, [{ opacity: 1 }, { opacity: 0 }], { duration: o.duration, delay: hold, fill: 'both', easing: 'ease-out' });\n      return a ? a.finished.then(end, end) : (end(), undefined);\n    },\n  },\n];\n\n/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */\nexport function registerAiPack(): void {\n  registerEffects(AI_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

package/dist/components/fx-ai.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>;
+}
+
+/**
+ * 7.8 — AI UI motion (`motionary/fx/ai`, also `motionary/components/fx-ai`):
+ *
+ * - `stream-text` (enter) — the element's text appears word by word, like a
+ *   streamed LLM reply, with a blinking caret at the end (`speed` ms/word).
+ * - `thinking-glow` (loop) — a soft colour glow breathes and drifts round the
+ *   element while a model is "thinking" (`colors`); the cleanup stops it.
+ * - `voice-wave` (attention) — the element's children bounce in a wave like
+ *   voice level bars (or the element pulses when it has none) (`cycles`).
+ * - `gen-skeleton` (enter) — a shimmering skeleton covers the element, then
+ *   dissolves to reveal the generated content (`hold`).
+ *
+ * Reduced motion: stream-text shows the text, thinking-glow is skipped,
+ * voice-wave does nothing, gen-skeleton fades in.
+ */
+
+/** Split text into words, keeping the whitespace after each (7.8). */
+declare function splitWords(text: string): string[];
+declare const AI_FX: EffectDefinition[];
+/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */
+declare function registerAiPack(): void;
+
+export { AI_FX, registerAiPack, splitWords };

package/dist/components/fx-ai.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>;
+}
+
+/**
+ * 7.8 — AI UI motion (`motionary/fx/ai`, also `motionary/components/fx-ai`):
+ *
+ * - `stream-text` (enter) — the element's text appears word by word, like a
+ *   streamed LLM reply, with a blinking caret at the end (`speed` ms/word).
+ * - `thinking-glow` (loop) — a soft colour glow breathes and drifts round the
+ *   element while a model is "thinking" (`colors`); the cleanup stops it.
+ * - `voice-wave` (attention) — the element's children bounce in a wave like
+ *   voice level bars (or the element pulses when it has none) (`cycles`).
+ * - `gen-skeleton` (enter) — a shimmering skeleton covers the element, then
+ *   dissolves to reveal the generated content (`hold`).
+ *
+ * Reduced motion: stream-text shows the text, thinking-glow is skipped,
+ * voice-wave does nothing, gen-skeleton fades in.
+ */
+
+/** Split text into words, keeping the whitespace after each (7.8). */
+declare function splitWords(text: string): string[];
+declare const AI_FX: EffectDefinition[];
+/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */
+declare function registerAiPack(): void;
+
+export { AI_FX, registerAiPack, splitWords };

package/dist/components/fx-ai.js

@@ -0,0 +1,126 @@
+import { registerEffects } from '../chunks/registry-CyKExAmE.js';
+import '../chunks/base-2-yYc93C.js';
+
+/** Split text into words, keeping the whitespace after each (7.8). */
+function splitWords(text) {
+    return text.match(/\S+\s*|\s+/g) || [];
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
+function textNodes(el) {
+    const out = [];
+    const walk = (n) => n.childNodes.forEach((c) => (c.nodeType === 3 ? (c.textContent || '').trim() && out.push(c) : c.nodeType === 1 && walk(c)));
+    walk(el);
+    return out;
+}
+const AI_FX = [
+    {
+        name: 'stream-text',
+        kind: 'enter',
+        description: 'The text appears word by word like a streamed LLM reply, with a blinking caret (`speed` ms per word).',
+        defaults: { speed: 45 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const speed = Math.max(5, Number(o.speed) || 45);
+            const spans = [];
+            const restores = [];
+            for (const t of textNodes(el)) {
+                const wrap = document.createElement('span');
+                wrap.setAttribute('data-usa-stream', '');
+                for (const w of splitWords(t.textContent || '')) {
+                    const s = document.createElement('span');
+                    s.textContent = w;
+                    s.style.opacity = '0';
+                    wrap.appendChild(s);
+                    spans.push(s);
+                }
+                t.parentNode.replaceChild(wrap, t);
+                restores.push(() => wrap.isConnected && wrap.replaceWith(t));
+            }
+            const caret = document.createElement('span');
+            caret.setAttribute('aria-hidden', 'true');
+            caret.textContent = '▍';
+            Object.assign(caret.style, { opacity: '.7', marginLeft: '1px' });
+            el.appendChild(caret);
+            const blink = ctx.animate(caret, [{ opacity: 0.8 }, { opacity: 0 }], { duration: 500, iterations: Infinity, direction: 'alternate' });
+            let done = false;
+            const finish = () => {
+                if (done)
+                    return;
+                done = true;
+                blink?.cancel();
+                caret.remove();
+                restores.forEach((r) => r());
+            };
+            ctx.onCleanup(finish);
+            const runs = spans.map((s, i) => {
+                const a = ctx.animate(s, [{ opacity: 0, filter: 'blur(3px)' }, { opacity: 1, filter: 'none' }], { duration: 220, delay: i * speed, fill: 'both', easing: 'ease-out' });
+                if (!a)
+                    s.style.opacity = '';
+                return a?.finished.catch(() => undefined);
+            });
+            return Promise.all(runs).then(finish);
+        },
+    },
+    {
+        name: 'thinking-glow',
+        kind: 'loop',
+        description: 'A soft colour glow breathes and drifts round the element while a model is "thinking" (`colors`, comma-separated). Stops on cleanup.',
+        defaults: { colors: '#6366f1,#ec4899,#22d3ee', duration: 2400 },
+        run: (el, o, ctx) => {
+            const cs = String(o.colors).split(',').map((c) => c.trim()).filter(Boolean);
+            const c = cs.length ? cs : ['#6366f1'];
+            const frames = c.map((col, i) => ({ boxShadow: `0 0 ${i % 2 ? 26 : 14}px ${i % 2 ? 4 : 1}px ${col}`, offset: i / c.length }));
+            frames.push({ boxShadow: `0 0 14px 1px ${c[0]}`, offset: 1 });
+            const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => a?.cancel();
+        },
+    },
+    {
+        name: 'voice-wave',
+        kind: 'attention',
+        description: "The element's children bounce in a wave like voice level bars, or the element pulses when it has none (`cycles`).",
+        defaults: { cycles: 2, duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const kids = Array.from(el.children);
+            const n = Math.max(1, Math.min(6, Number(o.cycles) || 2));
+            if (!kids.length)
+                return ctx.animate(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: o.duration, iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined);
+            return Promise.all(kids.map((k, i) => ctx.animate(k, [{ transform: 'scaleY(1)' }, { transform: 'scaleY(1.9)' }, { transform: 'scaleY(.6)' }, { transform: 'scaleY(1)' }], { duration: o.duration, delay: i * (o.duration / (kids.length * 2)), iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined))).then(() => undefined);
+        },
+    },
+    {
+        name: 'gen-skeleton',
+        kind: 'enter',
+        description: 'A shimmering skeleton covers the element, then dissolves to reveal the generated content (`hold` ms).',
+        defaults: { hold: 900, duration: 500 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const sk = document.createElement('span');
+            sk.setAttribute('aria-hidden', 'true');
+            Object.assign(sk.style, { position: 'absolute', inset: '0', borderRadius: 'inherit', pointerEvents: 'none', background: 'linear-gradient(100deg,#e2e8f0 30%,#f8fafc 50%,#e2e8f0 70%)', backgroundSize: '200% 100%', zIndex: '1' });
+            el.appendChild(sk);
+            const end = () => sk.remove();
+            ctx.onCleanup(end);
+            const hold = Math.max(0, Number(o.hold) || 0);
+            ctx.animate(sk, [{ backgroundPosition: '120% 0' }, { backgroundPosition: '-20% 0' }], { duration: 900, iterations: Math.max(1, Math.ceil(hold / 900)) });
+            const a = ctx.animate(sk, [{ opacity: 1 }, { opacity: 0 }], { duration: o.duration, delay: hold, fill: 'both', easing: 'ease-out' });
+            return a ? a.finished.then(end, end) : (end(), undefined);
+        },
+    },
+];
+/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */
+function registerAiPack() {
+    registerEffects(AI_FX);
+}
+
+export { AI_FX, registerAiPack, splitWords };
+//# sourceMappingURL=fx-ai.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-ai.js","sources":["../../src/components/fx2/ai.ts"],"sourcesContent":["/**\n * 7.8 — AI UI motion (`motionary/fx/ai`, also `motionary/components/fx-ai`):\n *\n * - `stream-text` (enter) — the element's text appears word by word, like a\n *   streamed LLM reply, with a blinking caret at the end (`speed` ms/word).\n * - `thinking-glow` (loop) — a soft colour glow breathes and drifts round the\n *   element while a model is \"thinking\" (`colors`); the cleanup stops it.\n * - `voice-wave` (attention) — the element's children bounce in a wave like\n *   voice level bars (or the element pulses when it has none) (`cycles`).\n * - `gen-skeleton` (enter) — a shimmering skeleton covers the element, then\n *   dissolves to reveal the generated content (`hold`).\n *\n * Reduced motion: stream-text shows the text, thinking-glow is skipped,\n * voice-wave does nothing, gen-skeleton fades in.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Split text into words, keeping the whitespace after each (7.8). */\nexport function splitWords(text: string): string[] {\n  return text.match(/\\S+\\s*|\\s+/g) || [];\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nfunction textNodes(el: Node): Text[] {\n  const out: Text[] = [];\n  const walk = (n: Node) => n.childNodes.forEach((c) => (c.nodeType === 3 ? (c.textContent || '').trim() && out.push(c as Text) : c.nodeType === 1 && walk(c)));\n  walk(el);\n  return out;\n}\n\nexport const AI_FX: EffectDefinition[] = [\n  {\n    name: 'stream-text',\n    kind: 'enter',\n    description: 'The text appears word by word like a streamed LLM reply, with a blinking caret (`speed` ms per word).',\n    defaults: { speed: 45 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const speed = Math.max(5, Number(o.speed) || 45);\n      const spans: HTMLElement[] = [];\n      const restores: (() => void)[] = [];\n      for (const t of textNodes(el)) {\n        const wrap = document.createElement('span');\n        wrap.setAttribute('data-usa-stream', '');\n        for (const w of splitWords(t.textContent || '')) {\n          const s = document.createElement('span');\n          s.textContent = w;\n          s.style.opacity = '0';\n          wrap.appendChild(s);\n          spans.push(s);\n        }\n        (t.parentNode as Node).replaceChild(wrap, t);\n        restores.push(() => wrap.isConnected && wrap.replaceWith(t));\n      }\n      const caret = document.createElement('span');\n      caret.setAttribute('aria-hidden', 'true');\n      caret.textContent = '▍';\n      Object.assign(caret.style, { opacity: '.7', marginLeft: '1px' });\n      el.appendChild(caret);\n      const blink = ctx.animate(caret, [{ opacity: 0.8 }, { opacity: 0 }], { duration: 500, iterations: Infinity, direction: 'alternate' });\n      let done = false;\n      const finish = () => {\n        if (done) return;\n        done = true;\n        blink?.cancel();\n        caret.remove();\n        restores.forEach((r) => r());\n      };\n      ctx.onCleanup(finish);\n      const runs = spans.map((s, i) => {\n        const a = ctx.animate(s, [{ opacity: 0, filter: 'blur(3px)' }, { opacity: 1, filter: 'none' }], { duration: 220, delay: i * speed, fill: 'both', easing: 'ease-out' });\n        if (!a) s.style.opacity = '';\n        return a?.finished.catch(() => undefined);\n      });\n      return Promise.all(runs).then(finish);\n    },\n  },\n  {\n    name: 'thinking-glow',\n    kind: 'loop',\n    description: 'A soft colour glow breathes and drifts round the element while a model is \"thinking\" (`colors`, comma-separated). Stops on cleanup.',\n    defaults: { colors: '#6366f1,#ec4899,#22d3ee', duration: 2400 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const cs = String(o.colors).split(',').map((c) => c.trim()).filter(Boolean);\n      const c = cs.length ? cs : ['#6366f1'];\n      const frames: Keyframe[] = c.map((col, i) => ({ boxShadow: `0 0 ${i % 2 ? 26 : 14}px ${i % 2 ? 4 : 1}px ${col}`, offset: i / c.length }));\n      frames.push({ boxShadow: `0 0 14px 1px ${c[0]}`, offset: 1 });\n      const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => a?.cancel();\n    },\n  },\n  {\n    name: 'voice-wave',\n    kind: 'attention',\n    description: \"The element's children bounce in a wave like voice level bars, or the element pulses when it has none (`cycles`).\",\n    defaults: { cycles: 2, duration: 700 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const kids = Array.from(el.children) as HTMLElement[];\n      const n = Math.max(1, Math.min(6, Number(o.cycles) || 2));\n      if (!kids.length) return ctx.animate(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: o.duration, iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined);\n      return Promise.all(\n        kids.map((k, i) =>\n          ctx.animate(k, [{ transform: 'scaleY(1)' }, { transform: 'scaleY(1.9)' }, { transform: 'scaleY(.6)' }, { transform: 'scaleY(1)' }], { duration: o.duration, delay: i * (o.duration / (kids.length * 2)), iterations: n, easing: 'ease-in-out' })?.finished.catch(() => undefined)\n        )\n      ).then(() => undefined);\n    },\n  },\n  {\n    name: 'gen-skeleton',\n    kind: 'enter',\n    description: 'A shimmering skeleton covers the element, then dissolves to reveal the generated content (`hold` ms).',\n    defaults: { hold: 900, duration: 500 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\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 sk = document.createElement('span');\n      sk.setAttribute('aria-hidden', 'true');\n      Object.assign(sk.style, { position: 'absolute', inset: '0', borderRadius: 'inherit', pointerEvents: 'none', background: 'linear-gradient(100deg,#e2e8f0 30%,#f8fafc 50%,#e2e8f0 70%)', backgroundSize: '200% 100%', zIndex: '1' });\n      el.appendChild(sk);\n      const end = () => sk.remove();\n      ctx.onCleanup(end);\n      const hold = Math.max(0, Number(o.hold) || 0);\n      ctx.animate(sk, [{ backgroundPosition: '120% 0' }, { backgroundPosition: '-20% 0' }], { duration: 900, iterations: Math.max(1, Math.ceil(hold / 900)) });\n      const a = ctx.animate(sk, [{ opacity: 1 }, { opacity: 0 }], { duration: o.duration, delay: hold, fill: 'both', easing: 'ease-out' });\n      return a ? a.finished.then(end, end) : (end(), undefined);\n    },\n  },\n];\n\n/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */\nexport function registerAiPack(): void {\n  registerEffects(AI_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx2.cjs

@@ -17,6 +17,7 @@ var components_fxSocial = require('./fx-social.cjs');
 var components_fxGame = require('./fx-game.cjs');
 var components_fxGeo = require('./fx-geo.cjs');
 var components_fxForm = require('./fx-form.cjs');
+var components_fxAi = require('./fx-ai.cjs');
 require('../chunks/registry-DehBVRDV.cjs');
 require('../chunks/base-BaQV-2ha.cjs');
 require('../chunks/generative-BHIj-NU0.cjs');
@@ -41,6 +42,7 @@ const EFFECT_PACKS = {
     game: components_fxGame.GAME_FX,
     geo: components_fxGeo.GEO_FX,
     form: components_fxForm.FORM_FX,
+    ai: components_fxAi.AI_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -60,6 +62,7 @@ function registerEffectPacks() {
     components_fxGame.registerGamePack();
     components_fxGeo.registerGeoPack();
     components_fxForm.registerFormPack();
+    components_fxAi.registerAiPack();
 }
 
 exports.EFFECT_PACK_FORMAT = components_marketplace.EFFECT_PACK_FORMAT;
@@ -123,6 +126,9 @@ exports.routeLength = components_fxGeo.routeLength;
 exports.FORM_FX = components_fxForm.FORM_FX;
 exports.registerFormPack = components_fxForm.registerFormPack;
 exports.shakeFrames = components_fxForm.shakeFrames;
+exports.AI_FX = components_fxAi.AI_FX;
+exports.registerAiPack = components_fxAi.registerAiPack;
+exports.splitWords = components_fxAi.splitWords;
 exports.EFFECT_PACKS = EFFECT_PACKS;
 exports.registerEffectPacks = registerEffectPacks;
 //# sourceMappingURL=fx2.cjs.map

package/dist/components/fx2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  gpu: GPU_FX,\n  text: TEXT3_FX,\n  light: LIGHT_FX,\n  depth: DEPTH3_FX,\n  morph: MORPH2_FX,\n  transitions: TRANSITIONS2_FX,\n  weather: WEATHER_FX,\n  physics: PHYSICS2_FX,\n  focus: FOCUS_FX,\n  music: MUSIC_FX,\n  chart: CHART_FX,\n  shop: SHOP_FX,\n  social: SOCIAL_FX,\n  game: GAME_FX,\n  geo: GEO_FX,\n  form: FORM_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n  registerGpuPack();\n  registerTextPack();\n  registerLightPack();\n  register3dPack();\n  registerMorphPack();\n  registerTransitionsPack();\n  registerWeatherPack();\n  registerPhysicsPack();\n  registerFocusPack();\n  registerMusicPack();\n  registerChartPack();\n  registerShopPack();\n  registerSocialPack();\n  registerGamePack();\n  registerGeoPack();\n  registerFormPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0DA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,GAAG,EAAEC,uBAAM;AACX,IAAA,IAAI,EAAEC,yBAAO;;AAGf;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  gpu: GPU_FX,\n  text: TEXT3_FX,\n  light: LIGHT_FX,\n  depth: DEPTH3_FX,\n  morph: MORPH2_FX,\n  transitions: TRANSITIONS2_FX,\n  weather: WEATHER_FX,\n  physics: PHYSICS2_FX,\n  focus: FOCUS_FX,\n  music: MUSIC_FX,\n  chart: CHART_FX,\n  shop: SHOP_FX,\n  social: SOCIAL_FX,\n  game: GAME_FX,\n  geo: GEO_FX,\n  form: FORM_FX,\n  ai: AI_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n  registerGpuPack();\n  registerTextPack();\n  registerLightPack();\n  register3dPack();\n  registerMorphPack();\n  registerTransitionsPack();\n  registerWeatherPack();\n  registerPhysicsPack();\n  registerFocusPack();\n  registerMusicPack();\n  registerChartPack();\n  registerShopPack();\n  registerSocialPack();\n  registerGamePack();\n  registerGeoPack();\n  registerFormPack();\n  registerAiPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,GAAG,EAAEC,uBAAM;AACX,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,EAAE,EAAEC,qBAAK;;AAGX;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,8BAAc,EAAE;AAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/fx2.d.cts

@@ -563,6 +563,28 @@ declare const FORM_FX: EffectDefinition[];
 /** Register field-shake, field-success, label-float and form-cascade (7.7). */
 declare function registerFormPack(): void;
 
+/**
+ * 7.8 — AI UI motion (`motionary/fx/ai`, also `motionary/components/fx-ai`):
+ *
+ * - `stream-text` (enter) — the element's text appears word by word, like a
+ *   streamed LLM reply, with a blinking caret at the end (`speed` ms/word).
+ * - `thinking-glow` (loop) — a soft colour glow breathes and drifts round the
+ *   element while a model is "thinking" (`colors`); the cleanup stops it.
+ * - `voice-wave` (attention) — the element's children bounce in a wave like
+ *   voice level bars (or the element pulses when it has none) (`cycles`).
+ * - `gen-skeleton` (enter) — a shimmering skeleton covers the element, then
+ *   dissolves to reveal the generated content (`hold`).
+ *
+ * Reduced motion: stream-text shows the text, thinking-glow is skipped,
+ * voice-wave does nothing, gen-skeleton fades in.
+ */
+
+/** Split text into words, keeping the whitespace after each (7.8). */
+declare function splitWords(text: string): string[];
+declare const AI_FX: EffectDefinition[];
+/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */
+declare function registerAiPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -672,5 +694,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
+export { AI_FX, CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerEffectPacks, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
 export type { EffectPackManifest, ShaderSpec };

package/dist/components/fx2.d.ts

@@ -563,6 +563,28 @@ declare const FORM_FX: EffectDefinition[];
 /** Register field-shake, field-success, label-float and form-cascade (7.7). */
 declare function registerFormPack(): void;
 
+/**
+ * 7.8 — AI UI motion (`motionary/fx/ai`, also `motionary/components/fx-ai`):
+ *
+ * - `stream-text` (enter) — the element's text appears word by word, like a
+ *   streamed LLM reply, with a blinking caret at the end (`speed` ms/word).
+ * - `thinking-glow` (loop) — a soft colour glow breathes and drifts round the
+ *   element while a model is "thinking" (`colors`); the cleanup stops it.
+ * - `voice-wave` (attention) — the element's children bounce in a wave like
+ *   voice level bars (or the element pulses when it has none) (`cycles`).
+ * - `gen-skeleton` (enter) — a shimmering skeleton covers the element, then
+ *   dissolves to reveal the generated content (`hold`).
+ *
+ * Reduced motion: stream-text shows the text, thinking-glow is skipped,
+ * voice-wave does nothing, gen-skeleton fades in.
+ */
+
+/** Split text into words, keeping the whitespace after each (7.8). */
+declare function splitWords(text: string): string[];
+declare const AI_FX: EffectDefinition[];
+/** Register stream-text, thinking-glow, voice-wave and gen-skeleton (7.8). */
+declare function registerAiPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -672,5 +694,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
+export { AI_FX, CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerEffectPacks, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
 export type { EffectPackManifest, ShaderSpec };