@motion-script/web 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# @motion-script/web
+
+The browser rendering backend for [Motion Script](https://motionscript.dev),
+built on Skia via [`@motion-script/canvaskit`](../canvaskit). It implements the
+`platform`/`render` abstractions from [`@motion-script/core`](../core) so
+scenes can be drawn to a canvas, played back with synchronized audio, and
+exported to video all in the browser.
+
+## What's in here
+
+- **Render context** — `WebRenderContext` draws the `@motion-script/core` scene
+  graph (shapes, fills, strokes, effects, text, video, masks) onto a CanvasKit
+  surface.
+- **Exporter** — `exportScenesAsVideo` renders one or more scenes offline and
+  muxes video and audio into an MP4 using [mediabunny](https://github.com/Vanilagy/mediabunny).
+- **Audio** — `WebAudioPlayer` drives playback through the Web Audio API.
+- **Storage / assets** — `WebStorageAdapter` and `WebMeasureScope` implement the
+  asset-loading and text-measurement abstractions `@motion-script/core` needs.
+- **Clock** — `WebMasterClock` synchronizes scene playback to `requestAnimationFrame`.
+- **CanvasKit access** — `getCanvasKit` loads and caches the CanvasKit/Skia
+  WebAssembly module used for rendering.
+
+## Usage
+
+```bash
+npm install @motion-script/web @motion-script/core @motion-script/canvaskit
+```
+
+For a guided setup, scaffold a project instead with:
+
+```bash
+npm create motion-script@latest
+```
+
+See the [docs](https://motionscript.dev/docs) for the full feature set and API
+reference.
+
+## Development
+
+From the monorepo root:
+
+```bash
+pnpm --filter @motion-script/web build
+pnpm --filter @motion-script/web test
+```
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for the architecture overview.

package/dist/audio/player.d.ts

@@ -0,0 +1,43 @@
+import { AudioDevice, AudioRequest } from "@motion-script/core";
+/**
+ * Web Audio implementation of {@link AudioDevice} — decodes and caches source
+ * buffers, then schedules/plays {@link AudioRequest}s as `AudioBufferSourceNode`s
+ * through a shared master gain (for global mute). `schedule` registers the
+ * active set of requests for the current frame; `syncTo` then starts/stops
+ * sources to match `sceneTime`, so playback follows scrubbing and seeks.
+ */
+export declare class WebAudioDevice extends AudioDevice {
+    private context;
+    private ownsContext;
+    private bufferCache;
+    private decoding;
+    private active;
+    private scheduled;
+    private disposed;
+    private masterGain;
+    private muted;
+    constructor(context?: AudioContext);
+    getContext(): AudioContext;
+    /**
+     * Resume the AudioContext. Must be called from within a user gesture
+     * (e.g. a click handler) the first time, or browsers keep the context
+     * suspended and no audio is heard.
+     */
+    unlock(): void;
+    has(src: string): boolean;
+    append(src: string, data: ArrayBuffer): Promise<void>;
+    /** Drops cached buffers and stops active sources for srcs/requests no longer referenced — called when the asset set changes (e.g. seeking across scene boundaries). */
+    retain(keep: ReadonlySet<string>): void;
+    /** Replaces the active request set; stops any currently-playing source whose request is no longer scheduled. Actual start/stop-to-match-time happens in `syncTo`. */
+    schedule(requests: readonly AudioRequest[]): void;
+    /** Starts sources whose `[startAt, endAt)` window now contains `sceneTime` (computing the correct buffer offset for the seek point) and stops any that have fallen outside it. */
+    syncTo(sceneTime: number): void;
+    play(time: number, _speed: number, _reverse: boolean): Promise<void>;
+    stop(): void;
+    setMuted(muted: boolean): void;
+    /** Starts a buffer source mid-clip if `sceneTime` lands after the request's start — `audioOffset` accounts for both the request's trim and the elapsed time since `startAt`. */
+    private playBuffer;
+    private stopSource;
+    dispose(): void;
+}
+//# sourceMappingURL=player.d.ts.map

package/dist/audio/player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../../src/audio/player.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQhE;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,WAAW,CAAkC;IACrD,OAAO,CAAC,QAAQ,CAAoC;IACpD,OAAO,CAAC,MAAM,CAAmC;IACjD,OAAO,CAAC,SAAS,CAAsB;IACvC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,UAAU,CAAW;IAC7B,OAAO,CAAC,KAAK,CAAS;gBAEV,OAAO,CAAC,EAAE,YAAY;IAQlC,UAAU,IAAI,YAAY;IAI1B;;;;OAIG;IACH,MAAM,IAAI,IAAI;IAMd,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAInB,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAkB3D,uKAAuK;IACvK,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI;IASvC,qKAAqK;IACrK,QAAQ,CAAC,QAAQ,EAAE,SAAS,YAAY,EAAE,GAAG,IAAI;IAQjD,kLAAkL;IAClL,MAAM,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAoBzB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IAO1E,IAAI,IAAI,IAAI;IAMZ,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK9B,gLAAgL;IAChL,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,UAAU;IAYlB,OAAO,IAAI,IAAI;CAgBlB"}

package/dist/audio/player.js

@@ -0,0 +1,165 @@
+import { AudioDevice } from "@motion-script/core";
+/**
+ * Web Audio implementation of {@link AudioDevice} — decodes and caches source
+ * buffers, then schedules/plays {@link AudioRequest}s as `AudioBufferSourceNode`s
+ * through a shared master gain (for global mute). `schedule` registers the
+ * active set of requests for the current frame; `syncTo` then starts/stops
+ * sources to match `sceneTime`, so playback follows scrubbing and seeks.
+ */
+export class WebAudioDevice extends AudioDevice {
+    context;
+    ownsContext;
+    bufferCache = new Map();
+    decoding = new Map();
+    active = new Map();
+    scheduled = [];
+    disposed = false;
+    masterGain;
+    muted = false;
+    constructor(context) {
+        super();
+        this.context = context ?? new AudioContext();
+        this.ownsContext = !context;
+        this.masterGain = this.context.createGain();
+        this.masterGain.connect(this.context.destination);
+    }
+    getContext() {
+        return this.context;
+    }
+    /**
+     * Resume the AudioContext. Must be called from within a user gesture
+     * (e.g. a click handler) the first time, or browsers keep the context
+     * suspended and no audio is heard.
+     */
+    unlock() {
+        if (this.context.state === "suspended") {
+            this.context.resume();
+        }
+    }
+    has(src) {
+        return this.bufferCache.has(src);
+    }
+    async append(src, data) {
+        if (this.bufferCache.has(src))
+            return;
+        const existing = this.decoding.get(src);
+        if (existing)
+            return existing;
+        // decodeAudioData detaches `data` — that's fine, the caller in
+        // AssetManager.fetchAudio discards its reference immediately after
+        // awaiting append. Skipping the defensive .slice(0) saves a multi-MB
+        // allocation per audio source.
+        const job = this.context.decodeAudioData(data).then((buffer) => {
+            this.bufferCache.set(src, buffer);
+        }).finally(() => {
+            this.decoding.delete(src);
+        });
+        this.decoding.set(src, job);
+        await job;
+    }
+    /** Drops cached buffers and stops active sources for srcs/requests no longer referenced — called when the asset set changes (e.g. seeking across scene boundaries). */
+    retain(keep) {
+        for (const src of [...this.bufferCache.keys()]) {
+            if (!keep.has(src))
+                this.bufferCache.delete(src);
+        }
+        for (const [id, active] of this.active) {
+            if (!keep.has(active.request.src))
+                this.stopSource(id, active);
+        }
+    }
+    /** Replaces the active request set; stops any currently-playing source whose request is no longer scheduled. Actual start/stop-to-match-time happens in `syncTo`. */
+    schedule(requests) {
+        const next = new Set(requests.map(r => r.id));
+        for (const [id, active] of this.active) {
+            if (!next.has(id))
+                this.stopSource(id, active);
+        }
+        this.scheduled = requests.slice();
+    }
+    /** Starts sources whose `[startAt, endAt)` window now contains `sceneTime` (computing the correct buffer offset for the seek point) and stops any that have fallen outside it. */
+    syncTo(sceneTime) {
+        const liveIds = new Set();
+        for (const req of this.scheduled) {
+            const end = req.endAt ?? Infinity;
+            const isInWindow = sceneTime >= req.startAt && sceneTime < end;
+            if (!isInWindow)
+                continue;
+            liveIds.add(req.id);
+            if (!this.active.has(req.id)) {
+                const buffer = this.bufferCache.get(req.src);
+                if (buffer)
+                    this.playBuffer(buffer, req, sceneTime);
+            }
+        }
+        for (const [id, active] of this.active) {
+            if (!liveIds.has(id))
+                this.stopSource(id, active);
+        }
+    }
+    async play(time, _speed, _reverse) {
+        if (this.context.state === "suspended") {
+            await this.context.resume();
+        }
+        this.syncTo(time);
+    }
+    stop() {
+        for (const [id, active] of this.active) {
+            this.stopSource(id, active);
+        }
+    }
+    setMuted(muted) {
+        this.muted = muted;
+        this.masterGain.gain.value = muted ? 0 : 1;
+    }
+    /** Starts a buffer source mid-clip if `sceneTime` lands after the request's start — `audioOffset` accounts for both the request's trim and the elapsed time since `startAt`. */
+    playBuffer(buffer, req, sceneTime) {
+        const gainNode = this.context.createGain();
+        gainNode.gain.value = req.volume;
+        gainNode.connect(this.masterGain);
+        const source = this.context.createBufferSource();
+        source.buffer = buffer;
+        source.loop = req.loop;
+        source.connect(gainNode);
+        const elapsed = sceneTime - req.startAt;
+        const audioOffset = req.trimStart + Math.max(0, elapsed);
+        source.start(0, audioOffset);
+        source.onended = () => {
+            if (this.active.get(req.id)?.source === source) {
+                this.active.delete(req.id);
+            }
+        };
+        this.active.set(req.id, { source, gainNode, request: req });
+    }
+    stopSource(id, active) {
+        try {
+            active.source.onended = null;
+            active.source.stop();
+            active.source.disconnect();
+            active.gainNode.disconnect();
+        }
+        catch {
+            // already stopped
+        }
+        this.active.delete(id);
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        super.dispose();
+        this.bufferCache.clear();
+        this.decoding.clear();
+        this.scheduled.length = 0;
+        try {
+            this.masterGain.disconnect();
+        }
+        catch {
+            // already disconnected
+        }
+        if (this.ownsContext && this.context.state !== "closed") {
+            this.context.close();
+        }
+    }
+}
+//# sourceMappingURL=player.js.map

package/dist/audio/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../src/audio/player.ts"],"names":[],"mappings":"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"}

package/dist/effects/bloom.d.ts

@@ -0,0 +1,19 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import type { BloomEffect } from "@motion-script/core";
+import { CanvasKitEffect } from "./effect";
+/**
+ * Bloom glow effect. Extracts pixels above `threshold`, blurs them, then
+ * Screen-blends that bright-pass back onto the original layer.
+ *
+ * Screen blend: result = 1 − (1 − source) × (1 − bloom)
+ * This ensures the bloom only brightens, never darkens, and naturally caps at white.
+ *
+ * MakeBlend(Screen, background=null, foreground=bloomFilter):
+ *   background = null → the dynamic source (the saveLayer content)
+ *   foreground = blurred threshold pass of the same source
+ */
+export declare class BloomCanvasKitEffect extends CanvasKitEffect<BloomEffect> {
+    constructor();
+    makeImageFilter(effect: BloomEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=bloom.d.ts.map

package/dist/effects/bloom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bloom.d.ts","sourceRoot":"","sources":["../../src/effects/bloom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBAAa,oBAAqB,SAAQ,eAAe,CAAC,WAAW,CAAC;;IAKlE,eAAe,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CAoD3D"}

package/dist/effects/bloom.js

@@ -0,0 +1,64 @@
+import { CanvasKitEffect } from "./effect";
+/**
+ * Bloom glow effect. Extracts pixels above `threshold`, blurs them, then
+ * Screen-blends that bright-pass back onto the original layer.
+ *
+ * Screen blend: result = 1 − (1 − source) × (1 − bloom)
+ * This ensures the bloom only brightens, never darkens, and naturally caps at white.
+ *
+ * MakeBlend(Screen, background=null, foreground=bloomFilter):
+ *   background = null → the dynamic source (the saveLayer content)
+ *   foreground = blurred threshold pass of the same source
+ */
+export class BloomCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("bloom");
+    }
+    makeImageFilter(effect, ck) {
+        if (effect.radius <= 0 || effect.intensity <= 0)
+            return null;
+        const t = Math.max(0, Math.min(1, effect.threshold));
+        const sigma = effect.radius / 2;
+        // Color matrix that zeroes out pixels below threshold and rescales the rest.
+        // Each channel: output = max(0, input − t) / (1 − t)
+        // In 5×4 matrix terms (row-major, applied to non-premultiplied colors):
+        //   output_R = 1/(1-t) * input_R + (-t/(1-t))
+        const scale = t < 1 ? 1 / (1 - t) : 1;
+        const bias = -t * scale;
+        // prettier-ignore
+        const thresholdMatrix = [
+            scale, 0, 0, 0, bias,
+            0, scale, 0, 0, bias,
+            0, 0, scale, 0, bias,
+            0, 0, 0, 1, 0,
+        ];
+        const thresholdCF = ck.ColorFilter.MakeMatrix(thresholdMatrix);
+        const thresholdIF = ck.ImageFilter.MakeColorFilter(thresholdCF, null);
+        thresholdCF.delete();
+        // Blur the bright pass.
+        const blurIF = ck.ImageFilter.MakeBlur(sigma, sigma, ck.TileMode.Decal, thresholdIF);
+        thresholdIF.delete();
+        // Scale the bloom pass by intensity using another color matrix.
+        let bloomIF = blurIF;
+        if (effect.intensity !== 1) {
+            const i = effect.intensity;
+            // prettier-ignore
+            const intensityMatrix = [
+                i, 0, 0, 0, 0,
+                0, i, 0, 0, 0,
+                0, 0, i, 0, 0,
+                0, 0, 0, 1, 0,
+            ];
+            const intensityCF = ck.ColorFilter.MakeMatrix(intensityMatrix);
+            bloomIF = ck.ImageFilter.MakeColorFilter(intensityCF, blurIF);
+            intensityCF.delete();
+            blurIF.delete();
+        }
+        // Screen-blend the bloom pass onto the source layer.
+        // background = null → source layer; foreground = bloomIF
+        const result = ck.ImageFilter.MakeBlend(ck.BlendMode.Screen, null, bloomIF);
+        bloomIF.delete();
+        return result;
+    }
+}
+//# sourceMappingURL=bloom.js.map

package/dist/effects/bloom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bloom.js","sourceRoot":"","sources":["../../src/effects/bloom.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,MAAM,OAAO,oBAAqB,SAAQ,eAA4B;IAClE;QACI,KAAK,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAED,eAAe,CAAC,MAAmB,EAAE,EAAa;QAC9C,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,MAAM,CAAC,SAAS,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAE7D,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;QACrD,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAEhC,6EAA6E;QAC7E,qDAAqD;QACrD,wEAAwE;QACxE,8CAA8C;QAC9C,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC;QAExB,kBAAkB;QAClB,MAAM,eAAe,GAAG;YACpB,KAAK,EAAE,CAAC,EAAM,CAAC,EAAM,CAAC,EAAE,IAAI;YAC5B,CAAC,EAAM,KAAK,EAAE,CAAC,EAAM,CAAC,EAAE,IAAI;YAC5B,CAAC,EAAM,CAAC,EAAM,KAAK,EAAE,CAAC,EAAE,IAAI;YAC5B,CAAC,EAAM,CAAC,EAAM,CAAC,EAAM,CAAC,EAAE,CAAC;SAC5B,CAAC;QAEF,MAAM,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;QAC/D,MAAM,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACtE,WAAW,CAAC,MAAM,EAAE,CAAC;QAErB,wBAAwB;QACxB,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QACrF,WAAW,CAAC,MAAM,EAAE,CAAC;QAErB,gEAAgE;QAChE,IAAI,OAAO,GAAQ,MAAM,CAAC;QAC1B,IAAI,MAAM,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC;YACzB,MAAM,CAAC,GAAG,MAAM,CAAC,SAAS,CAAC;YAC3B,kBAAkB;YAClB,MAAM,eAAe,GAAG;gBACpB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;gBACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;aAChB,CAAC;YACF,MAAM,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;YAC/D,OAAO,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YAC9D,WAAW,CAAC,MAAM,EAAE,CAAC;YACrB,MAAM,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QAED,qDAAqD;QACrD,yDAAyD;QACzD,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;QAC5E,OAAO,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,MAAM,CAAC;IAClB,CAAC;CACJ"}

package/dist/effects/blur.d.ts

@@ -0,0 +1,8 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import { CanvasKitEffect } from "./effect";
+import { type BlurEffect } from "@motion-script/core";
+export declare class BlurCanvasKitEffect extends CanvasKitEffect<BlurEffect> {
+    constructor();
+    makeImageFilter(effect: BlurEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=blur.d.ts.map

package/dist/effects/blur.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../src/effects/blur.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,qBAAa,mBAAoB,SAAQ,eAAe,CAAC,UAAU,CAAC;;IAKhE,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CAK1D"}

package/dist/effects/blur.js

@@ -0,0 +1,12 @@
+import { CanvasKitEffect } from "./effect";
+export class BlurCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("blur");
+    }
+    makeImageFilter(effect, ck) {
+        // Skia's blur sigma is roughly half the perceived "radius" of the blur.
+        const sigma = effect.radius / 2;
+        return ck.ImageFilter.MakeBlur(sigma, sigma, ck.TileMode.Decal, null);
+    }
+}
+//# sourceMappingURL=blur.js.map

package/dist/effects/blur.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur.js","sourceRoot":"","sources":["../../src/effects/blur.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,OAAO,mBAAoB,SAAQ,eAA2B;IAChE;QACI,KAAK,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,eAAe,CAAC,MAAkB,EAAE,EAAa;QAC7C,wEAAwE;QACxE,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAChC,OAAO,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC;CACJ"}

package/dist/effects/bulge-pinch.d.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit, Shader } from "@motion-script/canvaskit";
+import { type BulgePinchEffect } from "@motion-script/core";
+/** Drop the cached RuntimeEffect (called when the draw context is disposed). */
+export declare function disposeBulgePinch(): void;
+/**
+ * Build a paint shader that draws the backdrop bulged/pinched within the lens
+ * disc and passes it through untouched elsewhere. The caller draws it over the
+ * surface (clipped to the node silhouette), replacing the backdrop region with
+ * the warped version. Returns null when the effect is a no-op.
+ *
+ * @param effect    bulge/pinch params (strength, radius=reach, centre).
+ * @param ck        live CanvasKit instance.
+ * @param backdrop  child shader wrapping the snapshot of the content beneath.
+ * @param centerX   lens centre X in device px (node centre).
+ * @param centerY   lens centre Y in device px.
+ * @param width     node width in device px (the lens box width).
+ * @param height    node height in device px (the lens box height).
+ */
+export declare function makeBulgePinchShader(effect: BulgePinchEffect, ck: CanvasKit, backdrop: Shader, centerX: number, centerY: number, width: number, height: number): Shader | null;
+//# sourceMappingURL=bulge-pinch.d.ts.map

package/dist/effects/bulge-pinch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulge-pinch.d.ts","sourceRoot":"","sources":["../../src/effects/bulge-pinch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACjF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAsD5D,gFAAgF;AAChF,wBAAgB,iBAAiB,IAAI,IAAI,CAGxC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAChC,MAAM,EAAE,gBAAgB,EACxB,EAAE,EAAE,SAAS,EACb,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACf,MAAM,GAAG,IAAI,CAmBf"}

package/dist/effects/bulge-pinch.js

@@ -0,0 +1,86 @@
+/**
+ * Magnifier/pinch lens that *resamples the backdrop* — it reads the content
+ * beneath the node (passed in as the `u_backdrop` child shader) at a remapped
+ * position, so the area under the node is genuinely bulged or pinched, not just
+ * nudged. This is the resample approach a magnifying glass uses.
+ *
+ * The lens fills the node's *bounding box* (not a circle): position is normalised
+ * into the box as `n = (uv − centre) / halfExtent`, and the box metric
+ * `q = max(|n.x|, |n.y|)` runs 0 at the centre → 1 at the box edge. So a wide
+ * rect distorts across its whole width, a tall one across its height, etc. The
+ * caller clips the draw to the node's exact silhouette, so rounded corners /
+ * ellipses / polygons round or shape the lens to match.
+ *
+ * `u_reach` (0–1) sets how far from the centre the warp extends within the box;
+ * beyond it the field eases to identity so there is no seam at the shape edge.
+ * Inside, a spherical (barrel) profile drives the magnification:
+ *
+ *   t       = clamp((reach − q) / reach, 0, 1)   1 at centre → 0 at the reach edge
+ *   z       = sqrt(1 − (1 − t)²)                 dome height; 1 at centre → 0 at edge
+ *   factor  = 1 − strength · z                   strength>0 magnifies; <0 compresses
+ *   sample  = centre + (uv − centre) · factor
+ */
+const BULGE_PINCH_SKSL = `
+uniform shader u_backdrop;
+uniform vec2  u_center;   // lens centre, device px
+uniform vec2  u_half;     // node half-extent (halfWidth, halfHeight), device px
+uniform float u_reach;    // 0–1 fraction of the box the warp spans
+uniform float u_strength; // + bulge (magnify), − pinch (compress)
+
+vec4 main(vec2 fragCoord) {
+    vec2 n = (fragCoord - u_center) / max(u_half, vec2(1.0));
+    float q = max(abs(n.x), abs(n.y)); // box metric: 0 centre → 1 box edge
+    float reach = max(u_reach, 0.001);
+    if (q >= reach) {
+        return u_backdrop.eval(fragCoord);
+    }
+    float t = clamp((reach - q) / reach, 0.0, 1.0); // 1 centre → 0 at reach edge
+    float e = 1.0 - t;
+    float z = sqrt(max(0.0, 1.0 - e * e));          // dome falloff
+    float factor = 1.0 - u_strength * z;
+    vec2 samplePos = u_center + (fragCoord - u_center) * factor;
+    return u_backdrop.eval(samplePos);
+}
+`;
+let cachedEffect = null;
+function getRuntimeEffect(ck) {
+    if (!cachedEffect)
+        cachedEffect = ck.RuntimeEffect.Make(BULGE_PINCH_SKSL);
+    return cachedEffect;
+}
+/** Drop the cached RuntimeEffect (called when the draw context is disposed). */
+export function disposeBulgePinch() {
+    cachedEffect?.delete();
+    cachedEffect = null;
+}
+/**
+ * Build a paint shader that draws the backdrop bulged/pinched within the lens
+ * disc and passes it through untouched elsewhere. The caller draws it over the
+ * surface (clipped to the node silhouette), replacing the backdrop region with
+ * the warped version. Returns null when the effect is a no-op.
+ *
+ * @param effect    bulge/pinch params (strength, radius=reach, centre).
+ * @param ck        live CanvasKit instance.
+ * @param backdrop  child shader wrapping the snapshot of the content beneath.
+ * @param centerX   lens centre X in device px (node centre).
+ * @param centerY   lens centre Y in device px.
+ * @param width     node width in device px (the lens box width).
+ * @param height    node height in device px (the lens box height).
+ */
+export function makeBulgePinchShader(effect, ck, backdrop, centerX, centerY, width, height) {
+    const strength = effect.strength;
+    if (strength === 0 || effect.radius <= 0 || width <= 0 || height <= 0)
+        return null;
+    // center is a 0–1 offset from the node centre (0.5,0.5 = dead centre).
+    const cx = centerX + (effect.center.x - 0.5) * width;
+    const cy = centerY + (effect.center.y - 0.5) * height;
+    const halfW = width / 2;
+    const halfH = height / 2;
+    // radius is a 0–1 reach: how far across the node box the warp spans.
+    const reach = Math.min(1, effect.radius);
+    const runtimeEffect = getRuntimeEffect(ck);
+    if (!runtimeEffect)
+        return null;
+    return runtimeEffect.makeShaderWithChildren([cx, cy, halfW, halfH, reach, strength], [backdrop]);
+}
+//# sourceMappingURL=bulge-pinch.js.map

package/dist/effects/bulge-pinch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulge-pinch.js","sourceRoot":"","sources":["../../src/effects/bulge-pinch.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBxB,CAAC;AAEF,IAAI,YAAY,GAAyB,IAAI,CAAC;AAE9C,SAAS,gBAAgB,CAAC,EAAa;IACnC,IAAI,CAAC,YAAY;QAAE,YAAY,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC1E,OAAO,YAAY,CAAC;AACxB,CAAC;AAED,gFAAgF;AAChF,MAAM,UAAU,iBAAiB;IAC7B,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,GAAG,IAAI,CAAC;AACxB,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,oBAAoB,CAChC,MAAwB,EACxB,EAAa,EACb,QAAgB,EAChB,OAAe,EACf,OAAe,EACf,KAAa,EACb,MAAc;IAEd,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;IACjC,IAAI,QAAQ,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IAEnF,uEAAuE;IACvE,MAAM,EAAE,GAAG,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC;IACrD,MAAM,EAAE,GAAG,OAAO,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC;IACtD,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;IACxB,MAAM,KAAK,GAAG,MAAM,GAAG,CAAC,CAAC;IACzB,qEAAqE;IACrE,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAEzC,MAAM,aAAa,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC3C,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,aAAa,CAAC,sBAAsB,CACvC,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,EACvC,CAAC,QAAQ,CAAC,CACb,CAAC;AACN,CAAC"}

package/dist/effects/chromatic-aberration.d.ts

@@ -0,0 +1,19 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import type { ChromaticAberrationEffect } from "@motion-script/core";
+import { CanvasKitEffect } from "./effect";
+/**
+ * Chromatic aberration — red/blue lens-dispersion fringing.
+ *
+ * Implemented as three ImageFilter passes composed via Screen-blend:
+ *   1. R ghost: source shifted by (+dx, +dy) with red colour boost
+ *   2. B ghost: source shifted by (-dx, -dy) with blue colour boost
+ *   3. Screen-blend both ghosts onto the original source
+ *
+ * Screen-blend keeps the result from over-brightening and naturally
+ * saturates highlights, mimicking real lens dispersion.
+ */
+export declare class ChromaticAberrationCanvasKitEffect extends CanvasKitEffect<ChromaticAberrationEffect> {
+    constructor();
+    makeImageFilter(effect: ChromaticAberrationEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=chromatic-aberration.d.ts.map

package/dist/effects/chromatic-aberration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chromatic-aberration.d.ts","sourceRoot":"","sources":["../../src/effects/chromatic-aberration.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,qBAAa,kCAAmC,SAAQ,eAAe,CAAC,yBAAyB,CAAC;;IAK9F,eAAe,CAAC,MAAM,EAAE,yBAAyB,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CA8CzE"}

package/dist/effects/chromatic-aberration.js

@@ -0,0 +1,59 @@
+import { CanvasKitEffect } from "./effect";
+/**
+ * Chromatic aberration — red/blue lens-dispersion fringing.
+ *
+ * Implemented as three ImageFilter passes composed via Screen-blend:
+ *   1. R ghost: source shifted by (+dx, +dy) with red colour boost
+ *   2. B ghost: source shifted by (-dx, -dy) with blue colour boost
+ *   3. Screen-blend both ghosts onto the original source
+ *
+ * Screen-blend keeps the result from over-brightening and naturally
+ * saturates highlights, mimicking real lens dispersion.
+ */
+export class ChromaticAberrationCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("chromaticAberration");
+    }
+    makeImageFilter(effect, ck) {
+        if (effect.amount <= 0)
+            return null;
+        const rad = (effect.angle * Math.PI) / 180;
+        const dx = Math.cos(rad) * effect.amount;
+        const dy = Math.sin(rad) * effect.amount;
+        // R ghost: shift source by (+dx, +dy), boost red channel, suppress others.
+        // prettier-ignore
+        const redMatrix = [
+            1.4, -0.2, -0.2, 0, 0,
+            0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+            0, 0, 0, 1, 0,
+        ];
+        const redCF = ck.ColorFilter.MakeMatrix(redMatrix);
+        const redOffset = ck.ImageFilter.MakeOffset(dx, dy, null);
+        const rGhost = ck.ImageFilter.MakeColorFilter(redCF, redOffset);
+        redCF.delete();
+        redOffset.delete();
+        // B ghost: shift source by (-dx, -dy), boost blue channel, suppress others.
+        // prettier-ignore
+        const blueMatrix = [
+            0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0,
+            -0.2, -0.2, 1.4, 0, 0,
+            0, 0, 0, 1, 0,
+        ];
+        const blueCF = ck.ColorFilter.MakeMatrix(blueMatrix);
+        const blueOffset = ck.ImageFilter.MakeOffset(-dx, -dy, null);
+        const bGhost = ck.ImageFilter.MakeColorFilter(blueCF, blueOffset);
+        blueCF.delete();
+        blueOffset.delete();
+        // Screen-blend R ghost onto source (background = null = source).
+        const step1 = ck.ImageFilter.MakeBlend(ck.BlendMode.Screen, null, rGhost);
+        rGhost.delete();
+        // Screen-blend B ghost onto the result of step1.
+        const result = ck.ImageFilter.MakeBlend(ck.BlendMode.Screen, step1, bGhost);
+        step1.delete();
+        bGhost.delete();
+        return result;
+    }
+}
+//# sourceMappingURL=chromatic-aberration.js.map

package/dist/effects/chromatic-aberration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chromatic-aberration.js","sourceRoot":"","sources":["../../src/effects/chromatic-aberration.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,MAAM,OAAO,kCAAmC,SAAQ,eAA0C;IAC9F;QACI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACjC,CAAC;IAED,eAAe,CAAC,MAAiC,EAAE,EAAa;QAC5D,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAEpC,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;QAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QACzC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;QAEzC,2EAA2E;QAC3E,kBAAkB;QAClB,MAAM,SAAS,GAAG;YACd,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;YACrB,CAAC,EAAK,CAAC,EAAK,CAAC,EAAI,CAAC,EAAE,CAAC;YACrB,CAAC,EAAK,CAAC,EAAK,CAAC,EAAI,CAAC,EAAE,CAAC;YACrB,CAAC,EAAK,CAAC,EAAK,CAAC,EAAI,CAAC,EAAE,CAAC;SACxB,CAAC;QACF,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QAChE,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,SAAS,CAAC,MAAM,EAAE,CAAC;QAEnB,4EAA4E;QAC5E,kBAAkB;QAClB,MAAM,UAAU,GAAG;YACf,CAAC,EAAK,CAAC,EAAK,CAAC,EAAI,CAAC,EAAE,CAAC;YACrB,CAAC,EAAK,CAAC,EAAK,CAAC,EAAI,CAAC,EAAE,CAAC;YACrB,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC;YACrB,CAAC,EAAK,CAAC,EAAK,CAAC,EAAI,CAAC,EAAE,CAAC;SACxB,CAAC;QACF,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QACrD,MAAM,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;QAC7D,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAClE,MAAM,CAAC,MAAM,EAAE,CAAC;QAChB,UAAU,CAAC,MAAM,EAAE,CAAC;QAEpB,iEAAiE;QACjE,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAC1E,MAAM,CAAC,MAAM,EAAE,CAAC;QAEhB,iDAAiD;QACjD,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAC5E,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,MAAM,CAAC,MAAM,EAAE,CAAC;QAEhB,OAAO,MAAM,CAAC;IAClB,CAAC;CACJ"}

package/dist/effects/effect.d.ts

@@ -0,0 +1,32 @@
+import { type SceneEffect as IEffect } from "@motion-script/core";
+import type { CanvasKit } from "@motion-script/canvaskit";
+/**
+ * Abstract base for CanvasKit effect renderers.
+ *
+ * Subclasses implement `makeImageFilter` using either built-in CanvasKit filters
+ * (ImageFilter.MakeBlur, ColorFilter.MakeMatrix, etc.) or custom SkSL shaders
+ * via CanvasKit.RuntimeEffect.Make(sksl).
+ *
+ * The returned ImageFilter is applied as a saveLayer paint wrapping the node's
+ * draw calls, so it composites the entire node before applying the filter.
+ */
+export declare abstract class CanvasKitEffect<T extends IEffect = IEffect> {
+    readonly type: string;
+    constructor(type: string);
+    /**
+     * Produce a Skia ImageFilter for this effect.
+     *
+     * @param effect  Effect data (radius, amount, etc.)
+     * @param ck      Live CanvasKit instance
+     * @param width   Surface width in pixels — needed for size-relative effects (e.g. pixelate)
+     * @param height  Surface height in pixels
+     * @returns       An ImageFilter object, or null if the effect cannot be applied
+     */
+    abstract makeImageFilter(effect: T, ck: CanvasKit, width: number, height: number): any;
+    /**
+     * Clean up any persistent CanvasKit objects (e.g. cached RuntimeEffect).
+     * Called when the draw context is disposed.
+     */
+    dispose(): void;
+}
+//# sourceMappingURL=effect.d.ts.map

package/dist/effects/effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"effect.d.ts","sourceRoot":"","sources":["../../src/effects/effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D;;;;;;;;;GASG;AACH,8BAAsB,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;gBAEV,IAAI,EAAE,MAAM;IAIxB;;;;;;;;OAQG;IACH,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG;IAEtF;;;OAGG;IACH,OAAO,IAAI,IAAI;CAClB"}