use-scroll-animate 9.5.0 → 9.6.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [9.6.0] - 2026-10-09
+
+### Added
+- **Performance 3.0 — `motionary/fx/perf`** (= `motionary/components/fx-perf`, `registerPerf3Pack()`, also in `registerEffectPacks()` and the marketplace): `offscreenRender(canvas, program, { worker, paused })` (canvas animation in a Web Worker via OffscreenCanvas, main-thread fallback on the shared frame loop; `{ backend, stop, resize }`), `runInWorker(fn, ...args)` (one-off pure computation in a worker, inline fallback), `fpsMeter()`. Effects `idle-reveal` (enter — waits for `requestIdleCallback`) and `gpu-lift` (hover — compositor-only).
+- **2 new components (9.6)** in `motionary/components/widgets`:
+  - `<usa-perf-monitor>` — live overlay: FPS + sparkline, active animations, frame-loop callbacks, long tasks, clock state; `corner` (or `inline`), `collapsed`, `warn`; `stats`; `usa:jank` { fps }.
+  - `<usa-worker-canvas>` — canvas animation rendered off the main thread (`scene` particles · orbits · starfield, or your `program`); `data-usa-backend` worker / main; `backend`; `usa:backend`; `WORKER_SCENES`.
+- Showcase: 3 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- The perf monitor is a labelled `status` region with a real expand / collapse button (`aria-expanded`). The worker canvas is an `img` with `label`. Reduced motion: the worker canvas paints one still frame, `idle-reveal` shows at once, `gpu-lift` does nothing.
+
 ## [9.5.0] - 2026-10-09
 
 ### Added

package/dist/components/fx-perf.cjs

@@ -0,0 +1,161 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+var base = require('../chunks/base-DoRUZBy-.cjs');
+
+/** Run a pure function in a Web Worker; resolves with its (structured-cloneable) result (9.6). */
+function runInWorker(fn, ...args) {
+    if (typeof Worker === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL)
+        return Promise.resolve().then(() => fn(...args));
+    const src = `self.onmessage=async(e)=>{try{const r=await (${fn.toString()})(...e.data);self.postMessage({ok:true,r})}catch(err){self.postMessage({ok:false,e:String(err&&err.message||err)})}}`;
+    const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));
+    return new Promise((resolve, reject) => {
+        let w;
+        try {
+            w = new Worker(url);
+        }
+        catch (e) {
+            URL.revokeObjectURL(url);
+            return resolve(Promise.resolve().then(() => fn(...args)));
+        }
+        const done = () => {
+            w.terminate();
+            URL.revokeObjectURL(url);
+        };
+        w.onmessage = (e) => {
+            done();
+            if (e.data?.ok)
+                resolve(e.data.r);
+            else
+                reject(new Error(e.data?.e || 'worker failed'));
+        };
+        w.onerror = (e) => {
+            done();
+            reject(new Error(e.message || 'worker error'));
+        };
+        w.postMessage(args);
+    });
+}
+/** Animate `canvas` with `program` in a worker (OffscreenCanvas) when possible, else on the main thread (9.6). */
+function offscreenRender(canvas, program, opts = {}) {
+    const code = typeof program === 'string' ? program : program.toString();
+    const canWorker = opts.worker !== false && typeof Worker !== 'undefined' && typeof canvas.transferControlToOffscreen === 'function' && typeof Blob !== 'undefined' && !!URL.createObjectURL;
+    if (canWorker) {
+        try {
+            const off = canvas.transferControlToOffscreen();
+            const src = `let c,ctx,w,h,st={},run=true,t0=0;const draw=(${code});self.onmessage=(e)=>{const d=e.data;if(d.canvas){c=d.canvas;ctx=c.getContext('2d');w=c.width;h=c.height;const loop=(t)=>{if(run){if(!t0)t0=t;draw(ctx,t-t0,w,h,st)}requestAnimationFrame(loop)};requestAnimationFrame(loop)}if(d.size){w=c.width=d.size[0];h=c.height=d.size[1]}if('run' in d)run=d.run;if(d.stop)close()}`;
+            const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));
+            const w = new Worker(url);
+            w.postMessage({ canvas: off }, [off]);
+            if (opts.paused)
+                w.postMessage({ run: false });
+            return {
+                backend: 'worker',
+                stop: () => {
+                    w.postMessage({ stop: true });
+                    w.terminate();
+                    URL.revokeObjectURL(url);
+                },
+                resize: (a, b) => w.postMessage({ size: [a, b] }),
+            };
+        }
+        catch {
+            /* fall back to the main thread */
+        }
+    }
+    const ctx = canvas.getContext?.('2d');
+    if (!ctx)
+        return { backend: 'none', stop: () => undefined, resize: () => undefined };
+    // eslint-disable-next-line no-new-func
+    const draw = typeof program === 'function' ? program : new Function(`return (${code})`)();
+    const st = {};
+    let t = 0;
+    const stop = opts.paused
+        ? () => undefined
+        : base.onFrame((_now, dt) => {
+            t += dt;
+            draw(ctx, t, canvas.width, canvas.height, st);
+        });
+    if (opts.paused)
+        draw(ctx, 0, canvas.width, canvas.height, st);
+    return {
+        backend: 'main',
+        stop,
+        resize: (a, b) => {
+            canvas.width = a;
+            canvas.height = b;
+        },
+    };
+}
+/** A rolling FPS meter on the shared frame loop: { fps, stop } (fps updates every frame) (9.6). */
+function fpsMeter(window = 30) {
+    const samples = [];
+    let fps = 0;
+    const stop = base.onFrame((_t, dt) => {
+        if (dt <= 0)
+            return;
+        samples.push(1000 / dt);
+        if (samples.length > window)
+            samples.shift();
+        fps = Math.round(samples.reduce((a, b) => a + b, 0) / samples.length);
+    });
+    return {
+        get fps() {
+            return fps;
+        },
+        samples,
+        stop,
+    };
+}
+const PERF3_FX = [
+    {
+        name: 'idle-reveal',
+        kind: 'enter',
+        description: 'Waits for an idle moment (requestIdleCallback, ≤ `timeout` ms) before fading in, keeping first paint and input snappy.',
+        defaults: { duration: 400, timeout: 600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const prev = el.style.opacity;
+            el.style.opacity = '0';
+            ctx.onCleanup(() => (el.style.opacity = prev));
+            return new Promise((resolve) => {
+                const go = () => {
+                    el.style.opacity = prev;
+                    const a = ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: o.duration, easing: 'ease-out' });
+                    if (a)
+                        a.finished.then(() => resolve(), () => resolve());
+                    else
+                        resolve();
+                };
+                const ric = globalThis.requestIdleCallback;
+                if (ric)
+                    ric(go, { timeout: Number(o.timeout) || 600 });
+                else
+                    setTimeout(go, 1);
+            });
+        },
+    },
+    {
+        name: 'gpu-lift',
+        kind: 'hover',
+        description: 'A compositor-only hover lift — only transform and opacity change, so it never triggers layout or paint.',
+        defaults: { duration: 250, lift: 6 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [{ transform: 'translateY(0) scale(1)' }, { transform: `translateY(${-Math.abs(Number(o.lift) || 6)}px) scale(1.02)` }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register idle-reveal and gpu-lift (9.6). */
+function registerPerf3Pack() {
+    registry.registerEffects(PERF3_FX);
+}
+
+exports.PERF3_FX = PERF3_FX;
+exports.fpsMeter = fpsMeter;
+exports.offscreenRender = offscreenRender;
+exports.registerPerf3Pack = registerPerf3Pack;
+exports.runInWorker = runInWorker;
+//# sourceMappingURL=fx-perf.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-perf.cjs","sources":["../../src/components/fx2/perf3.ts"],"sourcesContent":["/**\n * 9.6 — Performance 3.0 (`motionary/fx/perf`, also `motionary/components/fx-perf`):\n *\n * - `runInWorker(fn, ...args)` — run a pure function in a throw-away Web\n *   Worker (built from its source) and get a promise of its result; runs\n *   inline when Workers are unavailable.\n * - `offscreenRender(canvas, program, options)` — move a canvas animation\n *   off the main thread: `program` is the source of\n *   `function (ctx, t, w, h, state) {…}`; with OffscreenCanvas + Worker it\n *   runs in a worker (`backend: 'worker'`), otherwise on the main thread via\n *   the shared frame loop (`'main'`). Returns { backend, stop, resize }.\n * - `fpsMeter()` — a rolling frames-per-second meter on the shared loop.\n *\n * Effects: `idle-reveal` (enter) waits for an idle moment before fading in\n * (keeps first paint / input snappy); `gpu-lift` (hover) a compositor-only\n * lift (transform + opacity only). Reduced motion: idle-reveal just shows,\n * gpu-lift does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { onFrame } from '../base';\n\n/** Run a pure function in a Web Worker; resolves with its (structured-cloneable) result (9.6). */\nexport function runInWorker<A extends unknown[], R>(fn: (...args: A) => R | Promise<R>, ...args: A): Promise<R> {\n  if (typeof Worker === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) return Promise.resolve().then(() => fn(...args));\n  const src = `self.onmessage=async(e)=>{try{const r=await (${fn.toString()})(...e.data);self.postMessage({ok:true,r})}catch(err){self.postMessage({ok:false,e:String(err&&err.message||err)})}}`;\n  const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));\n  return new Promise<R>((resolve, reject) => {\n    let w: Worker;\n    try {\n      w = new Worker(url);\n    } catch (e) {\n      URL.revokeObjectURL(url);\n      return resolve(Promise.resolve().then(() => fn(...args)));\n    }\n    const done = () => {\n      w.terminate();\n      URL.revokeObjectURL(url);\n    };\n    w.onmessage = (e) => {\n      done();\n      if (e.data?.ok) resolve(e.data.r as R);\n      else reject(new Error(e.data?.e || 'worker failed'));\n    };\n    w.onerror = (e) => {\n      done();\n      reject(new Error(e.message || 'worker error'));\n    };\n    w.postMessage(args);\n  });\n}\n\nexport type DrawProgram = string | ((ctx: CanvasRenderingContext2D, t: number, w: number, h: number, state: Record<string, unknown>) => void);\n/** Animate `canvas` with `program` in a worker (OffscreenCanvas) when possible, else on the main thread (9.6). */\nexport function offscreenRender(canvas: HTMLCanvasElement, program: DrawProgram, opts: { worker?: boolean; paused?: boolean } = {}): { backend: 'worker' | 'main' | 'none'; stop(): void; resize(w: number, h: number): void } {\n  const code = typeof program === 'string' ? program : program.toString();\n  const canWorker = opts.worker !== false && typeof Worker !== 'undefined' && typeof (canvas as any).transferControlToOffscreen === 'function' && typeof Blob !== 'undefined' && !!URL.createObjectURL;\n  if (canWorker) {\n    try {\n      const off = (canvas as any).transferControlToOffscreen();\n      const src = `let c,ctx,w,h,st={},run=true,t0=0;const draw=(${code});self.onmessage=(e)=>{const d=e.data;if(d.canvas){c=d.canvas;ctx=c.getContext('2d');w=c.width;h=c.height;const loop=(t)=>{if(run){if(!t0)t0=t;draw(ctx,t-t0,w,h,st)}requestAnimationFrame(loop)};requestAnimationFrame(loop)}if(d.size){w=c.width=d.size[0];h=c.height=d.size[1]}if('run' in d)run=d.run;if(d.stop)close()}`;\n      const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));\n      const w = new Worker(url);\n      w.postMessage({ canvas: off }, [off]);\n      if (opts.paused) w.postMessage({ run: false });\n      return {\n        backend: 'worker',\n        stop: () => {\n          w.postMessage({ stop: true });\n          w.terminate();\n          URL.revokeObjectURL(url);\n        },\n        resize: (a, b) => w.postMessage({ size: [a, b] }),\n      };\n    } catch {\n      /* fall back to the main thread */\n    }\n  }\n  const ctx = canvas.getContext?.('2d');\n  if (!ctx) return { backend: 'none', stop: () => undefined, resize: () => undefined };\n  // eslint-disable-next-line no-new-func\n  const draw = typeof program === 'function' ? program : (new Function(`return (${code})`)() as Exclude<DrawProgram, string>);\n  const st: Record<string, unknown> = {};\n  let t = 0;\n  const stop = opts.paused\n    ? () => undefined\n    : onFrame((_now, dt) => {\n        t += dt;\n        draw(ctx, t, canvas.width, canvas.height, st);\n      });\n  if (opts.paused) draw(ctx, 0, canvas.width, canvas.height, st);\n  return {\n    backend: 'main',\n    stop,\n    resize: (a, b) => {\n      canvas.width = a;\n      canvas.height = b;\n    },\n  };\n}\n\n/** A rolling FPS meter on the shared frame loop: { fps, stop } (fps updates every frame) (9.6). */\nexport function fpsMeter(window = 30): { readonly fps: number; readonly samples: number[]; stop(): void } {\n  const samples: number[] = [];\n  let fps = 0;\n  const stop = onFrame((_t, dt) => {\n    if (dt <= 0) return;\n    samples.push(1000 / dt);\n    if (samples.length > window) samples.shift();\n    fps = Math.round(samples.reduce((a, b) => a + b, 0) / samples.length);\n  });\n  return {\n    get fps() {\n      return fps;\n    },\n    samples,\n    stop,\n  };\n}\n\nexport const PERF3_FX: EffectDefinition[] = [\n  {\n    name: 'idle-reveal',\n    kind: 'enter',\n    description: 'Waits for an idle moment (requestIdleCallback, ≤ `timeout` ms) before fading in, keeping first paint and input snappy.',\n    defaults: { duration: 400, timeout: 600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const prev = el.style.opacity;\n      el.style.opacity = '0';\n      ctx.onCleanup(() => (el.style.opacity = prev));\n      return new Promise<void>((resolve) => {\n        const go = () => {\n          el.style.opacity = prev;\n          const a = ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: o.duration, easing: 'ease-out' });\n          if (a) a.finished.then(() => resolve(), () => resolve());\n          else resolve();\n        };\n        const ric = (globalThis as any).requestIdleCallback as ((cb: () => void, o?: { timeout: number }) => number) | undefined;\n        if (ric) ric(go, { timeout: Number(o.timeout) || 600 });\n        else setTimeout(go, 1);\n      });\n    },\n  },\n  {\n    name: 'gpu-lift',\n    kind: 'hover',\n    description: 'A compositor-only hover lift — only transform and opacity change, so it never triggers layout or paint.',\n    defaults: { duration: 250, lift: 6 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(el, [{ transform: 'translateY(0) scale(1)' }, { transform: `translateY(${-Math.abs(Number(o.lift) || 6)}px) scale(1.02)` }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register idle-reveal and gpu-lift (9.6). */\nexport function registerPerf3Pack(): void {\n  registerEffects(PERF3_FX);\n}\n"],"names":["onFrame","registerEffects"],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 9.6 — Performance 3.0 (`motionary/fx/perf`, also `motionary/components/fx-perf`):
+ *
+ * - `runInWorker(fn, ...args)` — run a pure function in a throw-away Web
+ *   Worker (built from its source) and get a promise of its result; runs
+ *   inline when Workers are unavailable.
+ * - `offscreenRender(canvas, program, options)` — move a canvas animation
+ *   off the main thread: `program` is the source of
+ *   `function (ctx, t, w, h, state) {…}`; with OffscreenCanvas + Worker it
+ *   runs in a worker (`backend: 'worker'`), otherwise on the main thread via
+ *   the shared frame loop (`'main'`). Returns { backend, stop, resize }.
+ * - `fpsMeter()` — a rolling frames-per-second meter on the shared loop.
+ *
+ * Effects: `idle-reveal` (enter) waits for an idle moment before fading in
+ * (keeps first paint / input snappy); `gpu-lift` (hover) a compositor-only
+ * lift (transform + opacity only). Reduced motion: idle-reveal just shows,
+ * gpu-lift does nothing.
+ */
+
+/** Run a pure function in a Web Worker; resolves with its (structured-cloneable) result (9.6). */
+declare function runInWorker<A extends unknown[], R>(fn: (...args: A) => R | Promise<R>, ...args: A): Promise<R>;
+type DrawProgram = string | ((ctx: CanvasRenderingContext2D, t: number, w: number, h: number, state: Record<string, unknown>) => void);
+/** Animate `canvas` with `program` in a worker (OffscreenCanvas) when possible, else on the main thread (9.6). */
+declare function offscreenRender(canvas: HTMLCanvasElement, program: DrawProgram, opts?: {
+    worker?: boolean;
+    paused?: boolean;
+}): {
+    backend: 'worker' | 'main' | 'none';
+    stop(): void;
+    resize(w: number, h: number): void;
+};
+/** A rolling FPS meter on the shared frame loop: { fps, stop } (fps updates every frame) (9.6). */
+declare function fpsMeter(window?: number): {
+    readonly fps: number;
+    readonly samples: number[];
+    stop(): void;
+};
+declare const PERF3_FX: EffectDefinition[];
+/** Register idle-reveal and gpu-lift (9.6). */
+declare function registerPerf3Pack(): void;
+
+export { PERF3_FX, fpsMeter, offscreenRender, registerPerf3Pack, runInWorker };
+export type { DrawProgram };

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

@@ -0,0 +1,86 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 9.6 — Performance 3.0 (`motionary/fx/perf`, also `motionary/components/fx-perf`):
+ *
+ * - `runInWorker(fn, ...args)` — run a pure function in a throw-away Web
+ *   Worker (built from its source) and get a promise of its result; runs
+ *   inline when Workers are unavailable.
+ * - `offscreenRender(canvas, program, options)` — move a canvas animation
+ *   off the main thread: `program` is the source of
+ *   `function (ctx, t, w, h, state) {…}`; with OffscreenCanvas + Worker it
+ *   runs in a worker (`backend: 'worker'`), otherwise on the main thread via
+ *   the shared frame loop (`'main'`). Returns { backend, stop, resize }.
+ * - `fpsMeter()` — a rolling frames-per-second meter on the shared loop.
+ *
+ * Effects: `idle-reveal` (enter) waits for an idle moment before fading in
+ * (keeps first paint / input snappy); `gpu-lift` (hover) a compositor-only
+ * lift (transform + opacity only). Reduced motion: idle-reveal just shows,
+ * gpu-lift does nothing.
+ */
+
+/** Run a pure function in a Web Worker; resolves with its (structured-cloneable) result (9.6). */
+declare function runInWorker<A extends unknown[], R>(fn: (...args: A) => R | Promise<R>, ...args: A): Promise<R>;
+type DrawProgram = string | ((ctx: CanvasRenderingContext2D, t: number, w: number, h: number, state: Record<string, unknown>) => void);
+/** Animate `canvas` with `program` in a worker (OffscreenCanvas) when possible, else on the main thread (9.6). */
+declare function offscreenRender(canvas: HTMLCanvasElement, program: DrawProgram, opts?: {
+    worker?: boolean;
+    paused?: boolean;
+}): {
+    backend: 'worker' | 'main' | 'none';
+    stop(): void;
+    resize(w: number, h: number): void;
+};
+/** A rolling FPS meter on the shared frame loop: { fps, stop } (fps updates every frame) (9.6). */
+declare function fpsMeter(window?: number): {
+    readonly fps: number;
+    readonly samples: number[];
+    stop(): void;
+};
+declare const PERF3_FX: EffectDefinition[];
+/** Register idle-reveal and gpu-lift (9.6). */
+declare function registerPerf3Pack(): void;
+
+export { PERF3_FX, fpsMeter, offscreenRender, registerPerf3Pack, runInWorker };
+export type { DrawProgram };

package/dist/components/fx-perf.js

@@ -0,0 +1,155 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import { o as onFrame } from '../chunks/base-CLuqlLfG.js';
+
+/** Run a pure function in a Web Worker; resolves with its (structured-cloneable) result (9.6). */
+function runInWorker(fn, ...args) {
+    if (typeof Worker === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL)
+        return Promise.resolve().then(() => fn(...args));
+    const src = `self.onmessage=async(e)=>{try{const r=await (${fn.toString()})(...e.data);self.postMessage({ok:true,r})}catch(err){self.postMessage({ok:false,e:String(err&&err.message||err)})}}`;
+    const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));
+    return new Promise((resolve, reject) => {
+        let w;
+        try {
+            w = new Worker(url);
+        }
+        catch (e) {
+            URL.revokeObjectURL(url);
+            return resolve(Promise.resolve().then(() => fn(...args)));
+        }
+        const done = () => {
+            w.terminate();
+            URL.revokeObjectURL(url);
+        };
+        w.onmessage = (e) => {
+            done();
+            if (e.data?.ok)
+                resolve(e.data.r);
+            else
+                reject(new Error(e.data?.e || 'worker failed'));
+        };
+        w.onerror = (e) => {
+            done();
+            reject(new Error(e.message || 'worker error'));
+        };
+        w.postMessage(args);
+    });
+}
+/** Animate `canvas` with `program` in a worker (OffscreenCanvas) when possible, else on the main thread (9.6). */
+function offscreenRender(canvas, program, opts = {}) {
+    const code = typeof program === 'string' ? program : program.toString();
+    const canWorker = opts.worker !== false && typeof Worker !== 'undefined' && typeof canvas.transferControlToOffscreen === 'function' && typeof Blob !== 'undefined' && !!URL.createObjectURL;
+    if (canWorker) {
+        try {
+            const off = canvas.transferControlToOffscreen();
+            const src = `let c,ctx,w,h,st={},run=true,t0=0;const draw=(${code});self.onmessage=(e)=>{const d=e.data;if(d.canvas){c=d.canvas;ctx=c.getContext('2d');w=c.width;h=c.height;const loop=(t)=>{if(run){if(!t0)t0=t;draw(ctx,t-t0,w,h,st)}requestAnimationFrame(loop)};requestAnimationFrame(loop)}if(d.size){w=c.width=d.size[0];h=c.height=d.size[1]}if('run' in d)run=d.run;if(d.stop)close()}`;
+            const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));
+            const w = new Worker(url);
+            w.postMessage({ canvas: off }, [off]);
+            if (opts.paused)
+                w.postMessage({ run: false });
+            return {
+                backend: 'worker',
+                stop: () => {
+                    w.postMessage({ stop: true });
+                    w.terminate();
+                    URL.revokeObjectURL(url);
+                },
+                resize: (a, b) => w.postMessage({ size: [a, b] }),
+            };
+        }
+        catch {
+            /* fall back to the main thread */
+        }
+    }
+    const ctx = canvas.getContext?.('2d');
+    if (!ctx)
+        return { backend: 'none', stop: () => undefined, resize: () => undefined };
+    // eslint-disable-next-line no-new-func
+    const draw = typeof program === 'function' ? program : new Function(`return (${code})`)();
+    const st = {};
+    let t = 0;
+    const stop = opts.paused
+        ? () => undefined
+        : onFrame((_now, dt) => {
+            t += dt;
+            draw(ctx, t, canvas.width, canvas.height, st);
+        });
+    if (opts.paused)
+        draw(ctx, 0, canvas.width, canvas.height, st);
+    return {
+        backend: 'main',
+        stop,
+        resize: (a, b) => {
+            canvas.width = a;
+            canvas.height = b;
+        },
+    };
+}
+/** A rolling FPS meter on the shared frame loop: { fps, stop } (fps updates every frame) (9.6). */
+function fpsMeter(window = 30) {
+    const samples = [];
+    let fps = 0;
+    const stop = onFrame((_t, dt) => {
+        if (dt <= 0)
+            return;
+        samples.push(1000 / dt);
+        if (samples.length > window)
+            samples.shift();
+        fps = Math.round(samples.reduce((a, b) => a + b, 0) / samples.length);
+    });
+    return {
+        get fps() {
+            return fps;
+        },
+        samples,
+        stop,
+    };
+}
+const PERF3_FX = [
+    {
+        name: 'idle-reveal',
+        kind: 'enter',
+        description: 'Waits for an idle moment (requestIdleCallback, ≤ `timeout` ms) before fading in, keeping first paint and input snappy.',
+        defaults: { duration: 400, timeout: 600 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const prev = el.style.opacity;
+            el.style.opacity = '0';
+            ctx.onCleanup(() => (el.style.opacity = prev));
+            return new Promise((resolve) => {
+                const go = () => {
+                    el.style.opacity = prev;
+                    const a = ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: o.duration, easing: 'ease-out' });
+                    if (a)
+                        a.finished.then(() => resolve(), () => resolve());
+                    else
+                        resolve();
+                };
+                const ric = globalThis.requestIdleCallback;
+                if (ric)
+                    ric(go, { timeout: Number(o.timeout) || 600 });
+                else
+                    setTimeout(go, 1);
+            });
+        },
+    },
+    {
+        name: 'gpu-lift',
+        kind: 'hover',
+        description: 'A compositor-only hover lift — only transform and opacity change, so it never triggers layout or paint.',
+        defaults: { duration: 250, lift: 6 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [{ transform: 'translateY(0) scale(1)' }, { transform: `translateY(${-Math.abs(Number(o.lift) || 6)}px) scale(1.02)` }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register idle-reveal and gpu-lift (9.6). */
+function registerPerf3Pack() {
+    registerEffects(PERF3_FX);
+}
+
+export { PERF3_FX, fpsMeter, offscreenRender, registerPerf3Pack, runInWorker };
+//# sourceMappingURL=fx-perf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-perf.js","sources":["../../src/components/fx2/perf3.ts"],"sourcesContent":["/**\n * 9.6 — Performance 3.0 (`motionary/fx/perf`, also `motionary/components/fx-perf`):\n *\n * - `runInWorker(fn, ...args)` — run a pure function in a throw-away Web\n *   Worker (built from its source) and get a promise of its result; runs\n *   inline when Workers are unavailable.\n * - `offscreenRender(canvas, program, options)` — move a canvas animation\n *   off the main thread: `program` is the source of\n *   `function (ctx, t, w, h, state) {…}`; with OffscreenCanvas + Worker it\n *   runs in a worker (`backend: 'worker'`), otherwise on the main thread via\n *   the shared frame loop (`'main'`). Returns { backend, stop, resize }.\n * - `fpsMeter()` — a rolling frames-per-second meter on the shared loop.\n *\n * Effects: `idle-reveal` (enter) waits for an idle moment before fading in\n * (keeps first paint / input snappy); `gpu-lift` (hover) a compositor-only\n * lift (transform + opacity only). Reduced motion: idle-reveal just shows,\n * gpu-lift does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { onFrame } from '../base';\n\n/** Run a pure function in a Web Worker; resolves with its (structured-cloneable) result (9.6). */\nexport function runInWorker<A extends unknown[], R>(fn: (...args: A) => R | Promise<R>, ...args: A): Promise<R> {\n  if (typeof Worker === 'undefined' || typeof Blob === 'undefined' || typeof URL === 'undefined' || !URL.createObjectURL) return Promise.resolve().then(() => fn(...args));\n  const src = `self.onmessage=async(e)=>{try{const r=await (${fn.toString()})(...e.data);self.postMessage({ok:true,r})}catch(err){self.postMessage({ok:false,e:String(err&&err.message||err)})}}`;\n  const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));\n  return new Promise<R>((resolve, reject) => {\n    let w: Worker;\n    try {\n      w = new Worker(url);\n    } catch (e) {\n      URL.revokeObjectURL(url);\n      return resolve(Promise.resolve().then(() => fn(...args)));\n    }\n    const done = () => {\n      w.terminate();\n      URL.revokeObjectURL(url);\n    };\n    w.onmessage = (e) => {\n      done();\n      if (e.data?.ok) resolve(e.data.r as R);\n      else reject(new Error(e.data?.e || 'worker failed'));\n    };\n    w.onerror = (e) => {\n      done();\n      reject(new Error(e.message || 'worker error'));\n    };\n    w.postMessage(args);\n  });\n}\n\nexport type DrawProgram = string | ((ctx: CanvasRenderingContext2D, t: number, w: number, h: number, state: Record<string, unknown>) => void);\n/** Animate `canvas` with `program` in a worker (OffscreenCanvas) when possible, else on the main thread (9.6). */\nexport function offscreenRender(canvas: HTMLCanvasElement, program: DrawProgram, opts: { worker?: boolean; paused?: boolean } = {}): { backend: 'worker' | 'main' | 'none'; stop(): void; resize(w: number, h: number): void } {\n  const code = typeof program === 'string' ? program : program.toString();\n  const canWorker = opts.worker !== false && typeof Worker !== 'undefined' && typeof (canvas as any).transferControlToOffscreen === 'function' && typeof Blob !== 'undefined' && !!URL.createObjectURL;\n  if (canWorker) {\n    try {\n      const off = (canvas as any).transferControlToOffscreen();\n      const src = `let c,ctx,w,h,st={},run=true,t0=0;const draw=(${code});self.onmessage=(e)=>{const d=e.data;if(d.canvas){c=d.canvas;ctx=c.getContext('2d');w=c.width;h=c.height;const loop=(t)=>{if(run){if(!t0)t0=t;draw(ctx,t-t0,w,h,st)}requestAnimationFrame(loop)};requestAnimationFrame(loop)}if(d.size){w=c.width=d.size[0];h=c.height=d.size[1]}if('run' in d)run=d.run;if(d.stop)close()}`;\n      const url = URL.createObjectURL(new Blob([src], { type: 'text/javascript' }));\n      const w = new Worker(url);\n      w.postMessage({ canvas: off }, [off]);\n      if (opts.paused) w.postMessage({ run: false });\n      return {\n        backend: 'worker',\n        stop: () => {\n          w.postMessage({ stop: true });\n          w.terminate();\n          URL.revokeObjectURL(url);\n        },\n        resize: (a, b) => w.postMessage({ size: [a, b] }),\n      };\n    } catch {\n      /* fall back to the main thread */\n    }\n  }\n  const ctx = canvas.getContext?.('2d');\n  if (!ctx) return { backend: 'none', stop: () => undefined, resize: () => undefined };\n  // eslint-disable-next-line no-new-func\n  const draw = typeof program === 'function' ? program : (new Function(`return (${code})`)() as Exclude<DrawProgram, string>);\n  const st: Record<string, unknown> = {};\n  let t = 0;\n  const stop = opts.paused\n    ? () => undefined\n    : onFrame((_now, dt) => {\n        t += dt;\n        draw(ctx, t, canvas.width, canvas.height, st);\n      });\n  if (opts.paused) draw(ctx, 0, canvas.width, canvas.height, st);\n  return {\n    backend: 'main',\n    stop,\n    resize: (a, b) => {\n      canvas.width = a;\n      canvas.height = b;\n    },\n  };\n}\n\n/** A rolling FPS meter on the shared frame loop: { fps, stop } (fps updates every frame) (9.6). */\nexport function fpsMeter(window = 30): { readonly fps: number; readonly samples: number[]; stop(): void } {\n  const samples: number[] = [];\n  let fps = 0;\n  const stop = onFrame((_t, dt) => {\n    if (dt <= 0) return;\n    samples.push(1000 / dt);\n    if (samples.length > window) samples.shift();\n    fps = Math.round(samples.reduce((a, b) => a + b, 0) / samples.length);\n  });\n  return {\n    get fps() {\n      return fps;\n    },\n    samples,\n    stop,\n  };\n}\n\nexport const PERF3_FX: EffectDefinition[] = [\n  {\n    name: 'idle-reveal',\n    kind: 'enter',\n    description: 'Waits for an idle moment (requestIdleCallback, ≤ `timeout` ms) before fading in, keeping first paint and input snappy.',\n    defaults: { duration: 400, timeout: 600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const prev = el.style.opacity;\n      el.style.opacity = '0';\n      ctx.onCleanup(() => (el.style.opacity = prev));\n      return new Promise<void>((resolve) => {\n        const go = () => {\n          el.style.opacity = prev;\n          const a = ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: o.duration, easing: 'ease-out' });\n          if (a) a.finished.then(() => resolve(), () => resolve());\n          else resolve();\n        };\n        const ric = (globalThis as any).requestIdleCallback as ((cb: () => void, o?: { timeout: number }) => number) | undefined;\n        if (ric) ric(go, { timeout: Number(o.timeout) || 600 });\n        else setTimeout(go, 1);\n      });\n    },\n  },\n  {\n    name: 'gpu-lift',\n    kind: 'hover',\n    description: 'A compositor-only hover lift — only transform and opacity change, so it never triggers layout or paint.',\n    defaults: { duration: 250, lift: 6 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(el, [{ transform: 'translateY(0) scale(1)' }, { transform: `translateY(${-Math.abs(Number(o.lift) || 6)}px) scale(1.02)` }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register idle-reveal and gpu-lift (9.6). */\nexport function registerPerf3Pack(): void {\n  registerEffects(PERF3_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx2.cjs

@@ -31,6 +31,7 @@ var components_fxLottie = require('./fx-lottie.cjs');
 var components_fxGenart = require('./fx-genart.cjs');
 var components_fxVideo = require('./fx-video.cjs');
 var components_fxSafe = require('./fx-safe.cjs');
+var components_fxPerf = require('./fx-perf.cjs');
 require('../chunks/registry-BVklOepd.cjs');
 require('../chunks/base-DoRUZBy-.cjs');
 require('../chunks/generative-BHIj-NU0.cjs');
@@ -69,6 +70,7 @@ const EFFECT_PACKS = {
     genart: components_fxGenart.GENART_FX,
     video: components_fxVideo.VIDEO_FX,
     safe: components_fxSafe.SAFE_FX,
+    perf3: components_fxPerf.PERF3_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -102,6 +104,7 @@ function registerEffectPacks() {
     components_fxGenart.registerGenArtPack();
     components_fxVideo.registerVideoPack();
     components_fxSafe.registerSafePack();
+    components_fxPerf.registerPerf3Pack();
 }
 
 exports.EFFECT_PACK_FORMAT = manifest.EFFECT_PACK_FORMAT;
@@ -225,6 +228,11 @@ exports.isFlashSafe = components_fxSafe.isFlashSafe;
 exports.loadMotionPreferences = components_fxSafe.loadMotionPreferences;
 exports.registerSafePack = components_fxSafe.registerSafePack;
 exports.vestibularSafe = components_fxSafe.vestibularSafe;
+exports.PERF3_FX = components_fxPerf.PERF3_FX;
+exports.fpsMeter = components_fxPerf.fpsMeter;
+exports.offscreenRender = components_fxPerf.offscreenRender;
+exports.registerPerf3Pack = components_fxPerf.registerPerf3Pack;
+exports.runInWorker = components_fxPerf.runInWorker;
 exports.EFFECT_PACKS = EFFECT_PACKS;
 exports.registerEffectPacks = registerEffectPacks;
 //# sourceMappingURL=fx2.cjs.map