@motion-script/web 0.1.0

package/dist/effects/effect.js

@@ -0,0 +1,22 @@
+/**
+ * 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 class CanvasKitEffect {
+    type;
+    constructor(type) {
+        this.type = type;
+    }
+    /**
+     * Clean up any persistent CanvasKit objects (e.g. cached RuntimeEffect).
+     * Called when the draw context is disposed.
+     */
+    dispose() { }
+}
+//# sourceMappingURL=effect.js.map

package/dist/effects/effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"effect.js","sourceRoot":"","sources":["../../src/effects/effect.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,MAAM,OAAgB,eAAe;IACxB,IAAI,CAAS;IAEtB,YAAY,IAAY;QACpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACrB,CAAC;IAaD;;;OAGG;IACH,OAAO,KAAW,CAAC;CACtB"}

package/dist/effects/grayscale.d.ts

@@ -0,0 +1,12 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import { CanvasKitEffect } from "./effect";
+import { type GrayScaleEffect } from "@motion-script/core";
+/**
+ * Desaturation via a single colour-matrix ImageFilter, lerped between identity
+ * (amount=0) and full BT.709 luminance grayscale (amount=1).
+ */
+export declare class GrayscaleCanvasKitEffect extends CanvasKitEffect<GrayScaleEffect> {
+    constructor();
+    makeImageFilter(effect: GrayScaleEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=grayscale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grayscale.d.ts","sourceRoot":"","sources":["../../src/effects/grayscale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAO3D;;;GAGG;AACH,qBAAa,wBAAyB,SAAQ,eAAe,CAAC,eAAe,CAAC;;IAK1E,eAAe,CAAC,MAAM,EAAE,eAAe,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CAkB/D"}

package/dist/effects/grayscale.js

@@ -0,0 +1,31 @@
+import { CanvasKitEffect } from "./effect";
+// ITU-R BT.709 luminance weights
+const LR = 0.2126;
+const LG = 0.7152;
+const LB = 0.0722;
+/**
+ * Desaturation via a single colour-matrix ImageFilter, lerped between identity
+ * (amount=0) and full BT.709 luminance grayscale (amount=1).
+ */
+export class GrayscaleCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("grayscale");
+    }
+    makeImageFilter(effect, ck) {
+        const a = Math.max(0, Math.min(1, effect.amount));
+        // 4×5 row-major color matrix (Skia format):
+        // [R'] = [r0..r4] * [R, G, B, A, 1]
+        // Interpolates between identity (a=0) and full luminance grayscale (a=1).
+        const matrix = [
+            1 - a + a * LR, a * LG, a * LB, 0, 0,
+            a * LR, 1 - a + a * LG, a * LB, 0, 0,
+            a * LR, a * LG, 1 - a + a * LB, 0, 0,
+            0, 0, 0, 1, 0,
+        ];
+        const colorFilter = ck.ColorFilter.MakeMatrix(matrix);
+        const imageFilter = ck.ImageFilter.MakeColorFilter(colorFilter, null);
+        colorFilter.delete();
+        return imageFilter;
+    }
+}
+//# sourceMappingURL=grayscale.js.map

package/dist/effects/grayscale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grayscale.js","sourceRoot":"","sources":["../../src/effects/grayscale.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,iCAAiC;AACjC,MAAM,EAAE,GAAG,MAAM,CAAC;AAClB,MAAM,EAAE,GAAG,MAAM,CAAC;AAClB,MAAM,EAAE,GAAG,MAAM,CAAC;AAElB;;;GAGG;AACH,MAAM,OAAO,wBAAyB,SAAQ,eAAgC;IAC1E;QACI,KAAK,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC;IAED,eAAe,CAAC,MAAuB,EAAE,EAAa;QAClD,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;QAElD,4CAA4C;QAC5C,oCAAoC;QACpC,0EAA0E;QAC1E,MAAM,MAAM,GAAG;YACX,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;YACpC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;YACpC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;YACpC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;SAChB,CAAC;QAEF,MAAM,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACtD,MAAM,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QACtE,WAAW,CAAC,MAAM,EAAE,CAAC;QACrB,OAAO,WAAW,CAAC;IACvB,CAAC;CACJ"}

package/dist/effects/index.d.ts

@@ -0,0 +1,13 @@
+/** CanvasKit-backed implementations of @motion-script/core's scene effects (post-processing image filters). */
+export { CanvasKitEffect } from "./effect";
+export { CanvasKitEffectRegistry } from "./registry";
+export { BlurCanvasKitEffect } from "./blur";
+export { GrayscaleCanvasKitEffect } from "./grayscale";
+export { PixelateCanvasKitEffect } from "./pixelate";
+export { TextureCanvasKitEffect } from "./texture";
+export { BloomCanvasKitEffect } from "./bloom";
+export { VintageCanvasKitEffect } from "./vintage";
+export { ChromaticAberrationCanvasKitEffect } from "./chromatic-aberration";
+export { SkSLLayerEffect } from "./sksl-layer";
+export { getOrCompileSkSL, disposeSkSLCache } from "./sksl-cache";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/effects/index.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAC/G,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,kCAAkC,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/effects/index.js

@@ -0,0 +1,13 @@
+/** CanvasKit-backed implementations of @motion-script/core's scene effects (post-processing image filters). */
+export { CanvasKitEffect } from "./effect";
+export { CanvasKitEffectRegistry } from "./registry";
+export { BlurCanvasKitEffect } from "./blur";
+export { GrayscaleCanvasKitEffect } from "./grayscale";
+export { PixelateCanvasKitEffect } from "./pixelate";
+export { TextureCanvasKitEffect } from "./texture";
+export { BloomCanvasKitEffect } from "./bloom";
+export { VintageCanvasKitEffect } from "./vintage";
+export { ChromaticAberrationCanvasKitEffect } from "./chromatic-aberration";
+export { SkSLLayerEffect } from "./sksl-layer";
+export { getOrCompileSkSL, disposeSkSLCache } from "./sksl-cache";
+//# sourceMappingURL=index.js.map

package/dist/effects/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/effects/index.ts"],"names":[],"mappings":"AAAA,+GAA+G;AAC/G,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,kCAAkC,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC"}

package/dist/effects/pixelate.d.ts

@@ -0,0 +1,23 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import { CanvasKitEffect } from "./effect";
+import { type PixelateEffect } from "@motion-script/core";
+export declare class PixelateCanvasKitEffect extends CanvasKitEffect<PixelateEffect> {
+    constructor();
+    /**
+     * Pixelation via two MakeMatrixTransform passes:
+     *   1. Downsample with nearest-neighbor (every Nth pixel sampled → coarse grid)
+     *   2. Upsample with nearest-neighbor (each coarse pixel blown up to an NxN block)
+     *
+     * horizontalBlocks / verticalBlocks are amounts in 0-1.
+     *   0 → blockSize = 1   (no pixelation)
+     *   1 → blockSize = MAX (one block large enough to cover most nodes)
+     *
+     * Mapping is exponential so small amounts read as visibly chunky without
+     * jumping straight to mush. MAX is capped well below the surface dimensions
+     * because at extreme blockSizes the two matrix transforms sample far outside
+     * the layer's drawn content (which is anchored at the layer origin, not
+     * centered) and the chain produces a fully-transparent result.
+     */
+    makeImageFilter(effect: PixelateEffect, ck: CanvasKit, _width: number, _height: number): any;
+}
+//# sourceMappingURL=pixelate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pixelate.d.ts","sourceRoot":"","sources":["../../src/effects/pixelate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,qBAAa,uBAAwB,SAAQ,eAAe,CAAC,cAAc,CAAC;;IAKxE;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,MAAM,EAAE,cAAc,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;CA2B/F"}

package/dist/effects/pixelate.js

@@ -0,0 +1,37 @@
+import { CanvasKitEffect } from "./effect";
+export class PixelateCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("pixelate");
+    }
+    /**
+     * Pixelation via two MakeMatrixTransform passes:
+     *   1. Downsample with nearest-neighbor (every Nth pixel sampled → coarse grid)
+     *   2. Upsample with nearest-neighbor (each coarse pixel blown up to an NxN block)
+     *
+     * horizontalBlocks / verticalBlocks are amounts in 0-1.
+     *   0 → blockSize = 1   (no pixelation)
+     *   1 → blockSize = MAX (one block large enough to cover most nodes)
+     *
+     * Mapping is exponential so small amounts read as visibly chunky without
+     * jumping straight to mush. MAX is capped well below the surface dimensions
+     * because at extreme blockSizes the two matrix transforms sample far outside
+     * the layer's drawn content (which is anchored at the layer origin, not
+     * centered) and the chain produces a fully-transparent result.
+     */
+    makeImageFilter(effect, ck, _width, _height) {
+        const MAX_BLOCK = 256;
+        const hAmount = Math.max(0, Math.min(1, effect.horizontalBlocks));
+        const vAmount = Math.max(0, Math.min(1, effect.verticalBlocks));
+        const blockW = Math.max(1, Math.pow(MAX_BLOCK, hAmount));
+        const blockH = Math.max(1, Math.pow(MAX_BLOCK, vAmount));
+        const nearest = { filter: ck.FilterMode.Nearest };
+        // Step 1: output(x,y) = layer(x * blockW, y * blockH)  — coarse subsampling
+        const step1 = ck.ImageFilter.MakeMatrixTransform([1 / blockW, 0, 0, 0, 1 / blockH, 0, 0, 0, 1], nearest, null);
+        // Step 2: output(x,y) = step1(x / blockW, y / blockH) — nearest-neighbor upscale
+        // Pixels 0..blockW-1 all round to step1(0) → same block color.
+        const step2 = ck.ImageFilter.MakeMatrixTransform([blockW, 0, 0, 0, blockH, 0, 0, 0, 1], nearest, step1);
+        step1.delete();
+        return step2;
+    }
+}
+//# sourceMappingURL=pixelate.js.map

package/dist/effects/pixelate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixelate.js","sourceRoot":"","sources":["../../src/effects/pixelate.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,OAAO,uBAAwB,SAAQ,eAA+B;IACxE;QACI,KAAK,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;IAED;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,MAAsB,EAAE,EAAa,EAAE,MAAc,EAAE,OAAe;QAClF,MAAM,SAAS,GAAG,GAAG,CAAC;QACtB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAClE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAChE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;QAEzD,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;QAElD,4EAA4E;QAC5E,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,mBAAmB,CAC5C,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAC7C,OAAO,EACP,IAAI,CACP,CAAC;QAEF,iFAAiF;QACjF,+DAA+D;QAC/D,MAAM,KAAK,GAAG,EAAE,CAAC,WAAW,CAAC,mBAAmB,CAC5C,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,OAAO,EACP,KAAK,CACR,CAAC;QAEF,KAAK,CAAC,MAAM,EAAE,CAAC;QACf,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ"}

package/dist/effects/registry.d.ts

@@ -0,0 +1,17 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import { CanvasKitEffect } from "./effect";
+import { type SceneEffect as IEffect } from "@motion-script/core";
+export declare class CanvasKitEffectRegistry {
+    private static registry;
+    static register(effect: CanvasKitEffect): void;
+    static get(type: string): CanvasKitEffect | undefined;
+    static has(type: string): boolean;
+    static makeImageFilter(effect: IEffect, ck: CanvasKit, width: number, height: number): any;
+    /**
+     * Compose all effects into a single ImageFilter chain applied in array order
+     * (index 0 is innermost — applied first to the layer content).
+     */
+    static composeFilters(effects: IEffect[], ck: CanvasKit, width: number, height: number): any | null;
+    static disposeAll(): void;
+}
+//# sourceMappingURL=registry.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/effects/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,WAAW,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC;AASlE,qBAAa,uBAAuB;IAChC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAsC;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI;IAI9C,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,SAAS;IAIrD,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIjC,MAAM,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG;IAM1F;;;OAGG;IACH,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI;IAYnG,MAAM,CAAC,UAAU,IAAI,IAAI;CAK5B"}

package/dist/effects/registry.js

@@ -0,0 +1,56 @@
+import { BlurCanvasKitEffect } from "./blur";
+import { GrayscaleCanvasKitEffect } from "./grayscale";
+import { PixelateCanvasKitEffect } from "./pixelate";
+import { TextureCanvasKitEffect } from "./texture";
+import { BloomCanvasKitEffect } from "./bloom";
+import { VintageCanvasKitEffect } from "./vintage";
+import { ChromaticAberrationCanvasKitEffect } from "./chromatic-aberration";
+import { SkSLLayerEffect } from "./sksl-layer";
+export class CanvasKitEffectRegistry {
+    static registry = new Map();
+    static register(effect) {
+        this.registry.set(effect.type, effect);
+    }
+    static get(type) {
+        return this.registry.get(type);
+    }
+    static has(type) {
+        return this.registry.has(type);
+    }
+    static makeImageFilter(effect, ck, width, height) {
+        const handler = this.registry.get(effect.type);
+        if (!handler)
+            return null;
+        return handler.makeImageFilter(effect, ck, width, height);
+    }
+    /**
+     * Compose all effects into a single ImageFilter chain applied in array order
+     * (index 0 is innermost — applied first to the layer content).
+     */
+    static composeFilters(effects, ck, width, height) {
+        let composed = null;
+        for (const effect of effects) {
+            const filter = this.makeImageFilter(effect, ck, width, height);
+            if (filter == null)
+                continue;
+            composed = composed === null
+                ? filter
+                : ck.ImageFilter.MakeCompose(filter, composed);
+        }
+        return composed;
+    }
+    static disposeAll() {
+        for (const handler of this.registry.values()) {
+            handler.dispose();
+        }
+    }
+}
+CanvasKitEffectRegistry.register(new BlurCanvasKitEffect());
+CanvasKitEffectRegistry.register(new GrayscaleCanvasKitEffect());
+CanvasKitEffectRegistry.register(new PixelateCanvasKitEffect());
+CanvasKitEffectRegistry.register(new TextureCanvasKitEffect());
+CanvasKitEffectRegistry.register(new BloomCanvasKitEffect());
+CanvasKitEffectRegistry.register(new VintageCanvasKitEffect());
+CanvasKitEffectRegistry.register(new ChromaticAberrationCanvasKitEffect());
+CanvasKitEffectRegistry.register(new SkSLLayerEffect());
+//# sourceMappingURL=registry.js.map

package/dist/effects/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/effects/registry.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAE,kCAAkC,EAAE,MAAM,wBAAwB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,MAAM,OAAO,uBAAuB;IACxB,MAAM,CAAC,QAAQ,GAAG,IAAI,GAAG,EAA2B,CAAC;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAuB;QACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,CAAC,GAAG,CAAC,IAAY;QACnB,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,GAAG,CAAC,IAAY;QACnB,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,eAAe,CAAC,MAAe,EAAE,EAAa,EAAE,KAAa,EAAE,MAAc;QAChF,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC1B,OAAO,OAAO,CAAC,eAAe,CAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,cAAc,CAAC,OAAkB,EAAE,EAAa,EAAE,KAAa,EAAE,MAAc;QAClF,IAAI,QAAQ,GAAQ,IAAI,CAAC;QACzB,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;YAC/D,IAAI,MAAM,IAAI,IAAI;gBAAE,SAAS;YAC7B,QAAQ,GAAG,QAAQ,KAAK,IAAI;gBACxB,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACvD,CAAC;QACD,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,MAAM,CAAC,UAAU;QACb,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC;YAC3C,OAAO,CAAC,OAAO,EAAE,CAAC;QACtB,CAAC;IACL,CAAC;;AAEL,uBAAuB,CAAC,QAAQ,CAAC,IAAI,mBAAmB,EAAE,CAAC,CAAC;AAC5D,uBAAuB,CAAC,QAAQ,CAAC,IAAI,wBAAwB,EAAE,CAAC,CAAC;AACjE,uBAAuB,CAAC,QAAQ,CAAC,IAAI,uBAAuB,EAAE,CAAC,CAAC;AAChE,uBAAuB,CAAC,QAAQ,CAAC,IAAI,sBAAsB,EAAE,CAAC,CAAC;AAC/D,uBAAuB,CAAC,QAAQ,CAAC,IAAI,oBAAoB,EAAE,CAAC,CAAC;AAC7D,uBAAuB,CAAC,QAAQ,CAAC,IAAI,sBAAsB,EAAE,CAAC,CAAC;AAC/D,uBAAuB,CAAC,QAAQ,CAAC,IAAI,kCAAkC,EAAE,CAAC,CAAC;AAC3E,uBAAuB,CAAC,QAAQ,CAAC,IAAI,eAAe,EAAE,CAAC,CAAC"}

package/dist/effects/sksl-cache.d.ts

@@ -0,0 +1,6 @@
+import type { CanvasKit, RuntimeEffect } from "@motion-script/canvaskit";
+/** Compile-and-cache a RuntimeEffect by shader source; returns the cached instance on repeat calls. */
+export declare function getOrCompileSkSL(shader: string, ck: CanvasKit): RuntimeEffect | null;
+/** Delete every cached RuntimeEffect's GPU resources and clear the cache (draw context teardown). */
+export declare function disposeSkSLCache(): void;
+//# sourceMappingURL=sksl-cache.d.ts.map

package/dist/effects/sksl-cache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sksl-cache.d.ts","sourceRoot":"","sources":["../../src/effects/sksl-cache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAKzE,uGAAuG;AACvG,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,GAAG,aAAa,GAAG,IAAI,CAQpF;AAED,qGAAqG;AACrG,wBAAgB,gBAAgB,IAAI,IAAI,CAGvC"}

package/dist/effects/sksl-cache.js

@@ -0,0 +1,21 @@
+// Keyed by shader source so identical SkSL across effects/instances compiles once.
+const cache = new Map();
+/** Compile-and-cache a RuntimeEffect by shader source; returns the cached instance on repeat calls. */
+export function getOrCompileSkSL(shader, ck) {
+    const cached = cache.get(shader);
+    if (cached)
+        return cached;
+    const effect = ck.RuntimeEffect.Make(shader, (err) => {
+        console.warn("[SkSL] Compilation error:", err);
+    });
+    if (effect)
+        cache.set(shader, effect);
+    return effect ?? null;
+}
+/** Delete every cached RuntimeEffect's GPU resources and clear the cache (draw context teardown). */
+export function disposeSkSLCache() {
+    for (const effect of cache.values())
+        effect.delete();
+    cache.clear();
+}
+//# sourceMappingURL=sksl-cache.js.map

package/dist/effects/sksl-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sksl-cache.js","sourceRoot":"","sources":["../../src/effects/sksl-cache.ts"],"names":[],"mappings":"AAEA,mFAAmF;AACnF,MAAM,KAAK,GAAG,IAAI,GAAG,EAAyB,CAAC;AAE/C,uGAAuG;AACvG,MAAM,UAAU,gBAAgB,CAAC,MAAc,EAAE,EAAa;IAC1D,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,MAAM,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE;QACjD,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IACH,IAAI,MAAM;QAAE,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,OAAO,MAAM,IAAI,IAAI,CAAC;AAC1B,CAAC;AAED,qGAAqG;AACrG,MAAM,UAAU,gBAAgB;IAC5B,KAAK,MAAM,MAAM,IAAI,KAAK,CAAC,MAAM,EAAE;QAAE,MAAM,CAAC,MAAM,EAAE,CAAC;IACrD,KAAK,CAAC,KAAK,EAAE,CAAC;AAClB,CAAC"}

package/dist/effects/sksl-layer.d.ts

@@ -0,0 +1,30 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import type { SkSLEffect } from "@motion-script/core";
+import { CanvasKitEffect } from "./effect";
+/**
+ * Layer-mode custom SkSL effect.
+ *
+ * The shader generates colour from position/uniforms and is composed onto the
+ * node's layer via `ImageFilter.MakeBlend(blendMode, source, shaderFilter)`.
+ *
+ * - `background = null` → the node's layer content (dynamic source)
+ * - `foreground = MakeShader(compiledShader)` → the shader output
+ *
+ * The default blend mode is Screen, which adds the shader output to the layer
+ * additively. Use `effect.blendMode` to override (e.g. `'multiply'`, `'srcOver'`).
+ *
+ * SkSL contract for layer-mode shaders:
+ * ```glsl
+ * uniform float u_myParam;  // uniforms in declaration order
+ *
+ * vec4 main(vec2 fragCoord) {
+ *   // generate overlay colour from position / uniforms
+ *   return vec4(r, g, b, a);
+ * }
+ * ```
+ */
+export declare class SkSLLayerEffect extends CanvasKitEffect<SkSLEffect> {
+    constructor();
+    makeImageFilter(effect: SkSLEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=sksl-layer.d.ts.map

package/dist/effects/sksl-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sksl-layer.d.ts","sourceRoot":"","sources":["../../src/effects/sksl-layer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,eAAgB,SAAQ,eAAe,CAAC,UAAU,CAAC;;IAK5D,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CAwB1D"}

package/dist/effects/sksl-layer.js

@@ -0,0 +1,82 @@
+import { CanvasKitEffect } from "./effect";
+import { getOrCompileSkSL } from "./sksl-cache";
+/**
+ * Layer-mode custom SkSL effect.
+ *
+ * The shader generates colour from position/uniforms and is composed onto the
+ * node's layer via `ImageFilter.MakeBlend(blendMode, source, shaderFilter)`.
+ *
+ * - `background = null` → the node's layer content (dynamic source)
+ * - `foreground = MakeShader(compiledShader)` → the shader output
+ *
+ * The default blend mode is Screen, which adds the shader output to the layer
+ * additively. Use `effect.blendMode` to override (e.g. `'multiply'`, `'srcOver'`).
+ *
+ * SkSL contract for layer-mode shaders:
+ * ```glsl
+ * uniform float u_myParam;  // uniforms in declaration order
+ *
+ * vec4 main(vec2 fragCoord) {
+ *   // generate overlay colour from position / uniforms
+ *   return vec4(r, g, b, a);
+ * }
+ * ```
+ */
+export class SkSLLayerEffect extends CanvasKitEffect {
+    constructor() {
+        super("sksl");
+    }
+    makeImageFilter(effect, ck) {
+        // Backdrop-mode SkSL is handled by beginBackdropSkSL in the render context.
+        if (effect.mode !== "layer")
+            return null;
+        const rte = getOrCompileSkSL(effect.shader, ck);
+        if (!rte)
+            return null;
+        const flat = effect.uniforms.flatMap((u) => typeof u.value === "number" ? [u.value] : u.value);
+        const shader = rte.makeShader(flat);
+        const shaderIF = ck.ImageFilter.MakeShader(shader);
+        shader.delete();
+        const blendModeName = effect.blendMode ?? "screen";
+        const blendMode = resolveBlendMode(ck, blendModeName);
+        // Blend the shader output onto the layer source.
+        // background = null → source; foreground = shader filter
+        const result = ck.ImageFilter.MakeBlend(blendMode, null, shaderIF);
+        shaderIF.delete();
+        return result;
+    }
+}
+function resolveBlendMode(ck, name) {
+    const map = {
+        srcOver: ck.BlendMode.SrcOver,
+        src: ck.BlendMode.Src,
+        dst: ck.BlendMode.Dst,
+        dstOver: ck.BlendMode.DstOver,
+        srcIn: ck.BlendMode.SrcIn,
+        dstIn: ck.BlendMode.DstIn,
+        srcOut: ck.BlendMode.SrcOut,
+        dstOut: ck.BlendMode.DstOut,
+        srcATop: ck.BlendMode.SrcATop,
+        dstATop: ck.BlendMode.DstATop,
+        xor: ck.BlendMode.Xor,
+        plus: ck.BlendMode.Plus,
+        modulate: ck.BlendMode.Modulate,
+        screen: ck.BlendMode.Screen,
+        overlay: ck.BlendMode.Overlay,
+        darken: ck.BlendMode.Darken,
+        lighten: ck.BlendMode.Lighten,
+        colorDodge: ck.BlendMode.ColorDodge,
+        colorBurn: ck.BlendMode.ColorBurn,
+        hardLight: ck.BlendMode.HardLight,
+        softLight: ck.BlendMode.SoftLight,
+        difference: ck.BlendMode.Difference,
+        exclusion: ck.BlendMode.Exclusion,
+        multiply: ck.BlendMode.Multiply,
+        hue: ck.BlendMode.Hue,
+        saturation: ck.BlendMode.Saturation,
+        color: ck.BlendMode.Color,
+        luminosity: ck.BlendMode.Luminosity,
+    };
+    return map[name] ?? ck.BlendMode.Screen;
+}
+//# sourceMappingURL=sksl-layer.js.map

package/dist/effects/sksl-layer.js.map

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

package/dist/effects/texture.d.ts

@@ -0,0 +1,31 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import { CanvasKitEffect } from "./effect";
+import { type TextureEffect } from "@motion-script/core";
+export declare class TextureCanvasKitEffect extends CanvasKitEffect<TextureEffect> {
+    constructor();
+    /**
+     * Figma-style "texture" spatter: the node's silhouette keeps a solid core that
+     * dissolves *gradually* into scattered grain toward its edge — the grain density
+     * thins with distance, sparse at the outer reach and dense near the interior.
+     *
+     * This mirrors the reference fragment shader, whose dissolve compares per-pixel
+     * noise against a density that ramps with distance from the shape edge. This
+     * CanvasKit build can't feed the dynamic layer into a RuntimeEffect as a child
+     * shader, so the same graded result is assembled from source-reading filters:
+     *
+     *   1. `ramp`      = MakeBlur(spread) softens the silhouette into a smooth alpha
+     *      gradient at the edge — the distance-graded density `t` from the shader.
+     *   2. `scattered` = MakeDisplacementMap pushes that *soft ramp* around by fractal
+     *      noise. Because the input is a gradient (not a hard edge), each grain's
+     *      survival depends on the local ramp height → density that thins with
+     *      distance, instead of a uniform-density band.
+     *   3. A steep alpha contrast curve (A' = 3·A − 1) resolves the chewed gradient
+     *      into crisp grain specks while preserving the graded falloff.
+     *
+     * Param mapping (mirrors the reference shader's controls):
+     *   radius          → spread: how far the dissolve reaches inward from the edge.
+     *   size.x / size.y → grain cell size; larger = chunkier grain (lower frequency).
+     */
+    makeImageFilter(effect: TextureEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=texture.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"texture.d.ts","sourceRoot":"","sources":["../../src/effects/texture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,qBAAa,sBAAuB,SAAQ,eAAe,CAAC,aAAa,CAAC;;IAKtE;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,eAAe,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CA+C7D"}

package/dist/effects/texture.js

@@ -0,0 +1,66 @@
+import { CanvasKitEffect } from "./effect";
+export class TextureCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("texture");
+    }
+    /**
+     * Figma-style "texture" spatter: the node's silhouette keeps a solid core that
+     * dissolves *gradually* into scattered grain toward its edge — the grain density
+     * thins with distance, sparse at the outer reach and dense near the interior.
+     *
+     * This mirrors the reference fragment shader, whose dissolve compares per-pixel
+     * noise against a density that ramps with distance from the shape edge. This
+     * CanvasKit build can't feed the dynamic layer into a RuntimeEffect as a child
+     * shader, so the same graded result is assembled from source-reading filters:
+     *
+     *   1. `ramp`      = MakeBlur(spread) softens the silhouette into a smooth alpha
+     *      gradient at the edge — the distance-graded density `t` from the shader.
+     *   2. `scattered` = MakeDisplacementMap pushes that *soft ramp* around by fractal
+     *      noise. Because the input is a gradient (not a hard edge), each grain's
+     *      survival depends on the local ramp height → density that thins with
+     *      distance, instead of a uniform-density band.
+     *   3. A steep alpha contrast curve (A' = 3·A − 1) resolves the chewed gradient
+     *      into crisp grain specks while preserving the graded falloff.
+     *
+     * Param mapping (mirrors the reference shader's controls):
+     *   radius          → spread: how far the dissolve reaches inward from the edge.
+     *   size.x / size.y → grain cell size; larger = chunkier grain (lower frequency).
+     */
+    makeImageFilter(effect, ck) {
+        const grainX = Math.max(1, effect.size.x);
+        const grainY = Math.max(1, effect.size.y);
+        const spread = Math.max(0, effect.radius);
+        // No spread → nothing to dissolve; let the layer through untouched.
+        if (spread <= 0)
+            return null;
+        // Grain frequency is the inverse of grain size, clamped to the range Skia's
+        // fractal noise accepts. Axes are independent so size can stretch the grain.
+        const fx = Math.min(0.9, Math.max(0.02, 1 / grainX));
+        const fy = Math.min(0.9, Math.max(0.02, 1 / grainY));
+        // 1. Soft distance ramp: blur the silhouette so its alpha gradients across
+        //    the spread zone (high inside → 0 outside).
+        const sigma = spread / 2;
+        const ramp = ck.ImageFilter.MakeBlur(sigma, sigma, ck.TileMode.Decal, null);
+        // 2. Scatter the ramp by fractal noise; displacing a gradient yields grain
+        //    whose density follows the local ramp height.
+        const noiseShader = ck.Shader.MakeFractalNoise(fx, fy, 4, 0, 0, 0);
+        const displacement = ck.ImageFilter.MakeShader(noiseShader);
+        noiseShader.delete();
+        const scattered = ck.ImageFilter.MakeDisplacementMap(ck.ColorChannel.Red, ck.ColorChannel.Green, spread, displacement, ramp);
+        ramp.delete();
+        displacement.delete();
+        // 3. Contrast the chewed gradient into crisp grain: A' = clamp(3·A − 1).
+        //    RGB rows are identity so the source colour is preserved.
+        const contrast = ck.ColorFilter.MakeMatrix([
+            1, 0, 0, 0, 0,
+            0, 1, 0, 0, 0,
+            0, 0, 1, 0, 0,
+            0, 0, 0, 3, -1,
+        ]);
+        const filter = ck.ImageFilter.MakeColorFilter(contrast, scattered);
+        contrast.delete();
+        scattered.delete();
+        return filter;
+    }
+}
+//# sourceMappingURL=texture.js.map

package/dist/effects/texture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"texture.js","sourceRoot":"","sources":["../../src/effects/texture.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,OAAO,sBAAuB,SAAQ,eAA8B;IACtE;QACI,KAAK,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,eAAe,CAAC,MAAqB,EAAE,EAAa;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;QAE1C,oEAAoE;QACpE,IAAI,MAAM,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC;QAE7B,4EAA4E;QAC5E,6EAA6E;QAC7E,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;QACrD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;QAErD,2EAA2E;QAC3E,gDAAgD;QAChD,MAAM,KAAK,GAAG,MAAM,GAAG,CAAC,CAAC;QACzB,MAAM,IAAI,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAE5E,2EAA2E;QAC3E,kDAAkD;QAClD,MAAM,WAAW,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACnE,MAAM,YAAY,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAC5D,WAAW,CAAC,MAAM,EAAE,CAAC;QAErB,MAAM,SAAS,GAAG,EAAE,CAAC,WAAW,CAAC,mBAAmB,CAChD,EAAE,CAAC,YAAY,CAAC,GAAG,EACnB,EAAE,CAAC,YAAY,CAAC,KAAK,EACrB,MAAM,EACN,YAAY,EACZ,IAAI,CACP,CAAC;QACF,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,YAAY,CAAC,MAAM,EAAE,CAAC;QAEtB,yEAAyE;QACzE,8DAA8D;QAC9D,MAAM,QAAQ,GAAG,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC;YACvC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YACb,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;SACjB,CAAC,CAAC;QACH,MAAM,MAAM,GAAG,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QACnE,QAAQ,CAAC,MAAM,EAAE,CAAC;QAClB,SAAS,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,MAAM,CAAC;IAClB,CAAC;CACJ"}

package/dist/effects/vintage.d.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "@motion-script/canvaskit";
+import type { VintageEffect } from "@motion-script/core";
+import { CanvasKitEffect } from "./effect";
+/**
+ * Vintage / film-look colour grading effect.
+ *
+ * Interpolates between the identity matrix and a sepia+desaturate matrix by
+ * `amount`, then shifts the colour temperature via `warmth`. Applied as a
+ * single colour-matrix ImageFilter so it composes cheaply with other effects.
+ *
+ * Sepia reference (ITU-R BT.601 luma weights for desaturation):
+ *   R' = 0.393R + 0.769G + 0.189B
+ *   G' = 0.349R + 0.686G + 0.168B
+ *   B' = 0.272R + 0.534G + 0.131B
+ */
+export declare class VintageCanvasKitEffect extends CanvasKitEffect<VintageEffect> {
+    constructor();
+    makeImageFilter(effect: VintageEffect, ck: CanvasKit): any;
+}
+//# sourceMappingURL=vintage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vintage.d.ts","sourceRoot":"","sources":["../../src/effects/vintage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;;;;;;;GAWG;AACH,qBAAa,sBAAuB,SAAQ,eAAe,CAAC,aAAa,CAAC;;IAKtE,eAAe,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG;CAiC7D"}

package/dist/effects/vintage.js

@@ -0,0 +1,47 @@
+import { CanvasKitEffect } from "./effect";
+/**
+ * Vintage / film-look colour grading effect.
+ *
+ * Interpolates between the identity matrix and a sepia+desaturate matrix by
+ * `amount`, then shifts the colour temperature via `warmth`. Applied as a
+ * single colour-matrix ImageFilter so it composes cheaply with other effects.
+ *
+ * Sepia reference (ITU-R BT.601 luma weights for desaturation):
+ *   R' = 0.393R + 0.769G + 0.189B
+ *   G' = 0.349R + 0.686G + 0.168B
+ *   B' = 0.272R + 0.534G + 0.131B
+ */
+export class VintageCanvasKitEffect extends CanvasKitEffect {
+    constructor() {
+        super("vintage");
+    }
+    makeImageFilter(effect, ck) {
+        if (effect.amount <= 0 && effect.warmth === 0)
+            return null;
+        const a = Math.max(0, Math.min(1, effect.amount));
+        const w = Math.max(-1, Math.min(1, effect.warmth));
+        // Lerp between identity and sepia per channel.
+        const lerp = (identity, sepia) => identity + (sepia - identity) * a;
+        // Sepia values
+        const sr = [0.393, 0.769, 0.189];
+        const sg = [0.349, 0.686, 0.168];
+        const sb = [0.272, 0.534, 0.131];
+        // Warmth shifts R up / B down (positive) or R down / B up (negative).
+        const warmR = w > 0 ? w * 0.15 : 0;
+        const warmB = w < 0 ? -w * 0.15 : 0;
+        const coolR = w < 0 ? -w * 0.05 : 0;
+        const coolB = w > 0 ? w * 0.05 : 0;
+        // prettier-ignore
+        const matrix = [
+            lerp(1, sr[0]), lerp(0, sr[1]), lerp(0, sr[2]), 0, warmR - coolR,
+            lerp(0, sg[0]), lerp(1, sg[1]), lerp(0, sg[2]), 0, 0,
+            lerp(0, sb[0]), lerp(0, sb[1]), lerp(1, sb[2]), 0, -warmB + coolB,
+            0, 0, 0, 1, 0,
+        ];
+        const cf = ck.ColorFilter.MakeMatrix(matrix);
+        const result = ck.ImageFilter.MakeColorFilter(cf, null);
+        cf.delete();
+        return result;
+    }
+}
+//# sourceMappingURL=vintage.js.map

package/dist/effects/vintage.js.map

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