@basementstudio/shader-lab 0.1.0 → 1.0.2

package/dist/src/renderer/shaders/tsl/utils/complex-sqrt.js

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { Fn, length, select, sqrt, vec2 } from "three/tsl";
+/**
+ * Complex square root.
+ * sqrt(a + bi) = (sqrt((r+a)/2), sign(b) * sqrt((r-a)/2))
+ */
+export const complexSqrt = Fn(([z]) => {
+    const r = length(z);
+    const rpart = sqrt(r.add(z.x).mul(0.5));
+    const ipart = sqrt(r.sub(z.x).mul(0.5));
+    return select(z.y.greaterThanEqual(0), vec2(rpart, ipart), vec2(rpart, ipart.negate()));
+});

package/dist/src/renderer/shaders/tsl/utils/complex-tan.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Complex tangent: tan(z) = sin(z) / cos(z)
+ */
+export declare const complexTan: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/complex-tan.js

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import { Fn } from "three/tsl";
+import { complexCos } from "./complex-cos.js";
+import { complexDiv } from "./complex-div.js";
+import { complexSin } from "./complex-sin.js";
+/**
+ * Complex tangent: tan(z) = sin(z) / cos(z)
+ */
+export const complexTan = Fn(([z]) => {
+    return complexDiv(complexSin(z), complexCos(z));
+});

package/dist/src/renderer/shaders/tsl/utils/complex-to-polar.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Convert complex number to polar form: (r, θ)
+ */
+export declare const complexToPolar: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/complex-to-polar.js

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { Fn, length, vec2 } from "three/tsl";
+import { atan2 } from "./atan2.js";
+/**
+ * Convert complex number to polar form: (r, θ)
+ */
+export const complexToPolar = Fn(([z]) => {
+    return vec2(length(z), atan2(z.y, z.x));
+});

package/dist/src/renderer/shaders/tsl/utils/hyperbolic.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hyperbolic cosine: cosh(x) = (e^x + e^-x) / 2
+ */
+export declare const cosh: (...args: unknown[]) => import("three/tsl").TSLNode;
+/**
+ * Hyperbolic sine: sinh(x) = (e^x - e^-x) / 2
+ */
+export declare const sinh: (...args: unknown[]) => import("three/tsl").TSLNode;

package/{packages/shader-lab-react/src/renderer/shaders/tsl/utils/hyperbolic.ts → dist/src/renderer/shaders/tsl/utils/hyperbolic.js}

@@ -1,20 +1,16 @@
 // @ts-nocheck
-import { exp, Fn, float } from "three/tsl"
-
+import { exp, Fn, float } from "three/tsl";
 /**
  * Hyperbolic cosine: cosh(x) = (e^x + e^-x) / 2
  */
 export const cosh = Fn(([x]) => {
-  const ex = exp(x)
-
-  return ex.add(float(1).div(ex)).mul(0.5)
-})
-
+    const ex = exp(x);
+    return ex.add(float(1).div(ex)).mul(0.5);
+});
 /**
  * Hyperbolic sine: sinh(x) = (e^x - e^-x) / 2
  */
 export const sinh = Fn(([x]) => {
-  const ex = exp(x)
-
-  return ex.sub(float(1).div(ex)).mul(0.5)
-})
+    const ex = exp(x);
+    return ex.sub(float(1).div(ex)).mul(0.5);
+});

package/dist/src/renderer/shaders/tsl/utils/index.d.ts

@@ -0,0 +1,38 @@
+export { acesTonemap, bleachBypassTonemap, cinematicTonemap, crossProcessTonemap, reinhardTonemap, tanh, technicolorTonemap, totosTonemap, } from "../color/tonemapping";
+export { cosinePalette } from "../cosine-palette";
+export { curlNoise3d } from "../noise/curl-noise-3d";
+export { curlNoise4d } from "../noise/curl-noise-4d";
+export { fbm } from "../noise/fbm";
+export { perlinNoise3d } from "../noise/perlin-noise-3d";
+export { ridgeNoise } from "../noise/ridge-noise";
+export { simplexNoise3d } from "../noise/simplex-noise-3d";
+export { simplexNoise4d } from "../noise/simplex-noise-4d";
+export { turbulence } from "../noise/turbulence";
+export { valueNoise3d } from "../noise/value-noise-3d";
+export { voronoiNoise3d } from "../noise/voronoi-noise-3d";
+export { bloom } from "../patterns/bloom";
+export { bloomEdgePattern } from "../patterns/bloom-edge-pattern";
+export { canvasWeavePattern } from "../patterns/canvas-weave-pattern";
+export { grainTexturePattern } from "../patterns/grain-texture-pattern";
+export { repeatingPattern } from "../patterns/repeating-pattern";
+export { atan2 } from "./atan2";
+export { complexConj } from "./complex-conj";
+export { complexCos } from "./complex-cos";
+export { complexDiv } from "./complex-div";
+export { complexLog } from "./complex-log";
+export { complexMobius } from "./complex-mobius";
+export { complexMul } from "./complex-mul";
+export { complexPow } from "./complex-pow";
+export { complexSin } from "./complex-sin";
+export { complexSqrt } from "./complex-sqrt";
+export { complexTan } from "./complex-tan";
+export { complexToPolar } from "./complex-to-polar";
+export { cosh, sinh } from "./hyperbolic";
+export { rotate } from "./rotate";
+export { screenAspectUV } from "./screen-aspect-uv";
+export { sdBox2d } from "./sd-box-2d";
+export { sdDiamond } from "./sd-diamond";
+export { sdRhombus } from "./sd-rhombus";
+export { sdSphere } from "./sd-sphere";
+export { smax } from "./smax";
+export { smin } from "./smin";

package/dist/src/renderer/shaders/tsl/utils/index.js

@@ -0,0 +1,39 @@
+// @ts-nocheck
+export { acesTonemap, bleachBypassTonemap, cinematicTonemap, crossProcessTonemap, reinhardTonemap, tanh, technicolorTonemap, totosTonemap, } from "../color/tonemapping.js";
+export { cosinePalette } from "../cosine-palette.js";
+export { curlNoise3d } from "../noise/curl-noise-3d.js";
+export { curlNoise4d } from "../noise/curl-noise-4d.js";
+export { fbm } from "../noise/fbm.js";
+export { perlinNoise3d } from "../noise/perlin-noise-3d.js";
+export { ridgeNoise } from "../noise/ridge-noise.js";
+export { simplexNoise3d } from "../noise/simplex-noise-3d.js";
+export { simplexNoise4d } from "../noise/simplex-noise-4d.js";
+export { turbulence } from "../noise/turbulence.js";
+export { valueNoise3d } from "../noise/value-noise-3d.js";
+export { voronoiNoise3d } from "../noise/voronoi-noise-3d.js";
+export { bloom } from "../patterns/bloom.js";
+export { bloomEdgePattern } from "../patterns/bloom-edge-pattern.js";
+export { canvasWeavePattern } from "../patterns/canvas-weave-pattern.js";
+export { grainTexturePattern } from "../patterns/grain-texture-pattern.js";
+export { repeatingPattern } from "../patterns/repeating-pattern.js";
+export { atan2 } from "./atan2.js";
+export { complexConj } from "./complex-conj.js";
+export { complexCos } from "./complex-cos.js";
+export { complexDiv } from "./complex-div.js";
+export { complexLog } from "./complex-log.js";
+export { complexMobius } from "./complex-mobius.js";
+export { complexMul } from "./complex-mul.js";
+export { complexPow } from "./complex-pow.js";
+export { complexSin } from "./complex-sin.js";
+export { complexSqrt } from "./complex-sqrt.js";
+export { complexTan } from "./complex-tan.js";
+export { complexToPolar } from "./complex-to-polar.js";
+export { cosh, sinh } from "./hyperbolic.js";
+export { rotate } from "./rotate.js";
+export { screenAspectUV } from "./screen-aspect-uv.js";
+export { sdBox2d } from "./sd-box-2d.js";
+export { sdDiamond } from "./sd-diamond.js";
+export { sdRhombus } from "./sd-rhombus.js";
+export { sdSphere } from "./sd-sphere.js";
+export { smax } from "./smax.js";
+export { smin } from "./smin.js";

package/dist/src/renderer/shaders/tsl/utils/rotate.d.ts

@@ -0,0 +1,2 @@
+import { vec2 } from "three/tsl";
+export declare function rotate(uvNode: ReturnType<typeof vec2>, angle: unknown): ReturnType<typeof vec2>;

package/dist/src/renderer/shaders/tsl/utils/rotate.js

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import { cos, sin, vec2 } from "three/tsl";
+export function rotate(uvNode, angle) {
+    const cosAngle = cos(angle);
+    const sinAngle = sin(angle);
+    return vec2(uvNode.x.mul(cosAngle).sub(uvNode.y.mul(sinAngle)), uvNode.x.mul(sinAngle).add(uvNode.y.mul(cosAngle)));
+}

package/dist/src/renderer/shaders/tsl/utils/screen-aspect-uv.d.ts

@@ -0,0 +1,2 @@
+import { vec2 } from "three/tsl";
+export declare const screenAspectUV: (renderSize: ReturnType<typeof vec2>, range?: import("three/tsl").TSLNode) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/screen-aspect-uv.js

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import { float, select, uv, vec2 } from "three/tsl";
+export const screenAspectUV = (renderSize, range = float(0.5)) => {
+    const baseUv = uv().sub(range);
+    return select(renderSize.x.greaterThan(renderSize.y), vec2(baseUv.x.mul(renderSize.x.div(renderSize.y)), baseUv.y), vec2(baseUv.x, baseUv.y.mul(renderSize.y.div(renderSize.x))));
+};

package/dist/src/renderer/shaders/tsl/utils/sd-box-2d.d.ts

@@ -0,0 +1 @@
+export declare const sdBox2d: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/sd-box-2d.js

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import { abs, Fn, float, max } from "three/tsl";
+export const sdBox2d = Fn(([_uv, size = float(0)]) => {
+    return max(abs(_uv.x), abs(_uv.y)).sub(float(size));
+});

package/dist/src/renderer/shaders/tsl/utils/sd-diamond.d.ts

@@ -0,0 +1 @@
+export declare const sdDiamond: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/sd-diamond.js

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import { abs, Fn, float } from "three/tsl";
+export const sdDiamond = Fn(([uvNode, radius = float(0)]) => {
+    return abs(uvNode.x).add(abs(uvNode.y)).sub(radius);
+});

package/dist/src/renderer/shaders/tsl/utils/sd-rhombus.d.ts

@@ -0,0 +1 @@
+export declare const sdRhombus: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/sd-rhombus.js

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { abs, clamp, dot, Fn, float, length, sign, vec2 } from "three/tsl";
+const ndot = Fn(([left, right]) => {
+    return left.x.mul(right.x).sub(left.y.mul(right.y));
+});
+export const sdRhombus = Fn(([pointNode, bounds = vec2(0.4)]) => {
+    const point = abs(pointNode).toVar();
+    const h = clamp(ndot(bounds.sub(point.mul(2)), bounds).div(dot(bounds, bounds)), -1, 1);
+    const distance = length(point.sub(bounds.mul(0.5).mul(vec2(float(1).sub(h), float(1).add(h)))));
+    return distance.mul(sign(point.x
+        .mul(bounds.y)
+        .add(point.y.mul(bounds.x))
+        .sub(bounds.x.mul(bounds.y))));
+});

package/dist/src/renderer/shaders/tsl/utils/sd-sphere.d.ts

@@ -0,0 +1 @@
+export declare const sdSphere: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/sd-sphere.js

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import { Fn, float, length } from "three/tsl";
+export const sdSphere = Fn(([_uv, radius = float(0)]) => {
+    return length(_uv).sub(float(radius));
+});

package/dist/src/renderer/shaders/tsl/utils/smax.d.ts

@@ -0,0 +1 @@
+export declare const smax: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/smax.js

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import { abs, Fn, float, max } from "three/tsl";
+export const smax = Fn(([left, right, factor = float(0)]) => {
+    const h = max(factor.sub(abs(left.sub(right))), 0).div(factor);
+    return max(left, right).add(h.mul(h).mul(factor).mul(0.25));
+});

package/dist/src/renderer/shaders/tsl/utils/smin.d.ts

@@ -0,0 +1 @@
+export declare const smin: (...args: unknown[]) => import("three/tsl").TSLNode;

package/dist/src/renderer/shaders/tsl/utils/smin.js

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import { abs, Fn, max, min } from "three/tsl";
+export const smin = Fn(([left, right, factor]) => {
+    const h = max(factor.sub(abs(left.sub(right))), 0).div(factor);
+    return min(left, right).sub(h.mul(h).mul(factor).mul(0.25));
+});

package/dist/src/renderer/text-pass.d.ts

@@ -0,0 +1,23 @@
+import { type TSLNode } from "three/tsl";
+import * as THREE from "three/webgpu";
+import { PassNode } from "./pass-node";
+import type { LayerParameterValues } from "../types/editor";
+type Node = TSLNode;
+export declare class TextPass extends PassNode {
+    private readonly placeholder;
+    private textureNode;
+    private textTexture;
+    private canvas;
+    private width;
+    private height;
+    private params;
+    private dirty;
+    constructor(layerId: string);
+    render(renderer: THREE.WebGPURenderer, inputTexture: THREE.Texture, outputTarget: THREE.WebGLRenderTarget, time: number, delta: number): void;
+    updateParams(params: LayerParameterValues): void;
+    resize(width: number, height: number): void;
+    dispose(): void;
+    protected buildEffectNode(): Node;
+    private rebuildTextTexture;
+}
+export {};

package/dist/src/renderer/text-pass.js

@@ -0,0 +1,129 @@
+import { float, texture as tslTexture, uv, vec2, vec4, } from "three/tsl";
+import * as THREE from "three/webgpu";
+import { PassNode } from "./pass-node.js";
+function resolveFontFamily(value) {
+    switch (value) {
+        case "mono":
+            return '"Geist Mono", ui-monospace, monospace';
+        case "sans":
+            return "Geist, Arial, sans-serif";
+        case "impact":
+            return 'Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif';
+        default:
+            return 'Georgia, "Times New Roman", serif';
+    }
+}
+export class TextPass extends PassNode {
+    placeholder;
+    textureNode;
+    textTexture = null;
+    canvas = null;
+    width = 1;
+    height = 1;
+    params = {};
+    dirty = true;
+    constructor(layerId) {
+        super(layerId);
+        this.placeholder = new THREE.Texture();
+        this.textureNode = tslTexture(this.placeholder, vec2(uv().x, float(1).sub(uv().y)));
+        this.rebuildEffectNode();
+    }
+    render(renderer, inputTexture, outputTarget, time, delta) {
+        if (!this.textTexture || this.dirty) {
+            this.rebuildTextTexture();
+        }
+        this.textureNode.value = this.textTexture ?? this.placeholder;
+        super.render(renderer, inputTexture, outputTarget, time, delta);
+    }
+    updateParams(params) {
+        this.params = params;
+        this.dirty = true;
+    }
+    resize(width, height) {
+        this.width = Math.max(1, width);
+        this.height = Math.max(1, height);
+        this.dirty = true;
+    }
+    dispose() {
+        this.textTexture?.dispose();
+        this.placeholder.dispose();
+        super.dispose();
+    }
+    buildEffectNode() {
+        if (!this.textureNode) {
+            return vec4(float(0), float(0), float(0), float(1));
+        }
+        return vec4(this.textureNode.rgb, float(1));
+    }
+    rebuildTextTexture() {
+        if (!this.canvas) {
+            this.canvas = document.createElement("canvas");
+        }
+        const canvas = this.canvas;
+        canvas.width = this.width;
+        canvas.height = this.height;
+        const context = canvas.getContext("2d");
+        if (!context) {
+            return;
+        }
+        const text = typeof this.params.text === "string" && this.params.text.length > 0
+            ? this.params.text
+            : "basement.studio";
+        const fontSize = typeof this.params.fontSize === "number"
+            ? Math.max(48, this.params.fontSize)
+            : 280;
+        const fontWeight = typeof this.params.fontWeight === "number"
+            ? Math.round(this.params.fontWeight)
+            : 700;
+        const letterSpacing = typeof this.params.letterSpacing === "number"
+            ? this.params.letterSpacing
+            : -0.02;
+        const fontFamily = resolveFontFamily(typeof this.params.fontFamily === "string"
+            ? this.params.fontFamily
+            : "display-serif");
+        const textColor = typeof this.params.textColor === "string"
+            ? this.params.textColor
+            : "#ffffff";
+        const backgroundColor = typeof this.params.backgroundColor === "string"
+            ? this.params.backgroundColor
+            : "#000000";
+        context.clearRect(0, 0, this.width, this.height);
+        context.fillStyle = backgroundColor;
+        context.fillRect(0, 0, this.width, this.height);
+        context.fillStyle = textColor;
+        context.textAlign = "center";
+        context.textBaseline = "middle";
+        context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        const characters = [...text];
+        const spacing = fontSize * letterSpacing;
+        let totalWidth = 0;
+        for (const [index, char] of characters.entries()) {
+            totalWidth += context.measureText(char).width;
+            if (index < characters.length - 1) {
+                totalWidth += spacing;
+            }
+        }
+        let x = this.width * 0.5 - totalWidth * 0.5;
+        const y = this.height * 0.5;
+        for (const char of characters) {
+            const charWidth = context.measureText(char).width;
+            context.fillText(char, x + charWidth * 0.5, y);
+            x += charWidth + spacing;
+        }
+        if (!this.textTexture) {
+            this.textTexture = new THREE.CanvasTexture(canvas);
+            this.textTexture.flipY = false;
+            this.textTexture.generateMipmaps = false;
+            this.textTexture.magFilter = THREE.LinearFilter;
+            this.textTexture.minFilter = THREE.LinearFilter;
+            this.textTexture.wrapS = THREE.ClampToEdgeWrapping;
+            this.textTexture.wrapT = THREE.ClampToEdgeWrapping;
+            this.textTexture.colorSpace = THREE.SRGBColorSpace;
+        }
+        else {
+            this.textTexture.image = canvas;
+        }
+        this.textTexture.needsUpdate = true;
+        this.dirty = false;
+    }
+}

package/dist/src/runtime-clock.d.ts

@@ -0,0 +1,9 @@
+import type { ShaderLabTimelineConfig } from "./types";
+export interface ShaderLabRuntimeClock {
+    delta: number;
+    duration: number;
+    loop: boolean;
+    time: number;
+}
+export declare function createRuntimeClock(timeline: Pick<ShaderLabTimelineConfig, "duration" | "loop">, time: number, delta: number): ShaderLabRuntimeClock;
+export declare function advanceRuntimeClock(currentTime: number, timeline: Pick<ShaderLabTimelineConfig, "duration" | "loop">, delta: number): number;

package/dist/src/runtime-clock.js

@@ -0,0 +1,20 @@
+const MIN_DURATION = 0.25;
+export function createRuntimeClock(timeline, time, delta) {
+    return {
+        delta,
+        duration: Math.max(timeline.duration, MIN_DURATION),
+        loop: timeline.loop,
+        time,
+    };
+}
+export function advanceRuntimeClock(currentTime, timeline, delta) {
+    if (!Number.isFinite(delta) || delta <= 0) {
+        return currentTime;
+    }
+    const duration = Math.max(timeline.duration, MIN_DURATION);
+    const nextTime = currentTime + delta;
+    if (timeline.loop) {
+        return nextTime % duration;
+    }
+    return Math.min(nextTime, duration);
+}

package/dist/src/runtime-frame.d.ts

@@ -0,0 +1,11 @@
+import { createRuntimeClock } from "./runtime-clock";
+import type { ShaderLabConfig, ShaderLabLayerConfig } from "./types";
+export interface ShaderLabRenderableLayer {
+    layer: ShaderLabLayerConfig;
+}
+export interface ShaderLabRuntimeFrame {
+    clock: ReturnType<typeof createRuntimeClock>;
+    composition: ShaderLabConfig["composition"];
+    layers: ShaderLabRenderableLayer[];
+}
+export declare function buildRuntimeFrame(config: ShaderLabConfig, time: number, delta: number): ShaderLabRuntimeFrame;

package/dist/src/runtime-frame.js

@@ -0,0 +1,12 @@
+import { createRuntimeClock } from "./runtime-clock.js";
+import { resolveEvaluatedLayers } from "./timeline.js";
+export function buildRuntimeFrame(config, time, delta) {
+    const layers = resolveEvaluatedLayers(config.layers, config.timeline.tracks, time)
+        .filter((layer) => layer.visible)
+        .map((layer) => ({ layer }));
+    return {
+        clock: createRuntimeClock(config.timeline, time, delta),
+        composition: config.composition,
+        layers,
+    };
+}

package/dist/src/shader-lab-composition.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties } from "react";
+import type { ShaderLabConfig } from "./types";
+export interface ShaderLabCompositionProps {
+    className?: string;
+    config: ShaderLabConfig;
+    onRuntimeError?: (message: string | null) => void;
+    style?: CSSProperties;
+}
+export declare function ShaderLabComposition({ className, config, onRuntimeError, style, }: ShaderLabCompositionProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/shader-lab-composition.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { buildRendererFrame } from "./renderer/contracts.js";
+import { browserSupportsWebGPU, createWebGPURenderer, } from "./renderer/create-webgpu-renderer.js";
+export function ShaderLabComposition({ className, config, onRuntimeError, style, }) {
+    const canvasRef = useRef(null);
+    const frameRef = useRef(null);
+    const lastTimeRef = useRef(null);
+    const [runtimeError, setRuntimeError] = useState(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        if (!browserSupportsWebGPU()) {
+            const message = "WebGPU is not available in this browser.";
+            setRuntimeError(message);
+            onRuntimeError?.(message);
+            return;
+        }
+        let cancelled = false;
+        let rendererPromise = null;
+        let runtimeRenderer = null;
+        const handleRuntimeError = (message) => {
+            setRuntimeError(message);
+            onRuntimeError?.(message);
+        };
+        const getViewportSize = () => {
+            const bounds = canvas.getBoundingClientRect();
+            return {
+                height: Math.max(1, Math.round(bounds.height)),
+                width: Math.max(1, Math.round(bounds.width)),
+            };
+        };
+        const renderFrame = (now) => {
+            if (cancelled || !runtimeRenderer) {
+                return;
+            }
+            const previousTime = lastTimeRef.current ?? now;
+            const delta = Math.max(0, (now - previousTime) / 1000);
+            lastTimeRef.current = now;
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            const viewportSize = getViewportSize();
+            runtimeRenderer.resize(viewportSize, devicePixelRatio);
+            runtimeRenderer.render(buildRendererFrame(config, now / 1000, delta, devicePixelRatio, viewportSize));
+            frameRef.current = window.requestAnimationFrame(renderFrame);
+        };
+        rendererPromise = createWebGPURenderer(canvas, handleRuntimeError);
+        void rendererPromise
+            .then(async (renderer) => {
+            if (cancelled) {
+                renderer.dispose();
+                return;
+            }
+            runtimeRenderer = renderer;
+            await renderer.initialize();
+            handleRuntimeError(null);
+            frameRef.current = window.requestAnimationFrame(renderFrame);
+        })
+            .catch((error) => {
+            handleRuntimeError(error instanceof Error
+                ? error.message
+                : "Failed to initialize the Shader Lab runtime renderer.");
+        });
+        return () => {
+            cancelled = true;
+            lastTimeRef.current = null;
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+            void rendererPromise?.then((renderer) => {
+                renderer.dispose();
+            });
+        };
+    }, [config, onRuntimeError]);
+    return (_jsxs("div", { className: className, "data-shader-lab-composition": "true", style: {
+            aspectRatio: `${config.composition.width} / ${config.composition.height}`,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            ...style,
+        }, children: [_jsx("canvas", { ref: canvasRef, style: { display: "block", height: "100%", width: "100%" } }), runtimeError ? (_jsx("div", { style: {
+                    alignItems: "center",
+                    background: "rgba(10, 13, 16, 0.82)",
+                    color: "rgba(255,255,255,0.92)",
+                    display: "flex",
+                    fontFamily: "monospace",
+                    fontSize: 12,
+                    inset: 0,
+                    justifyContent: "center",
+                    padding: 16,
+                    position: "absolute",
+                    textAlign: "center",
+                }, children: runtimeError })) : null] }));
+}

package/dist/src/timeline.d.ts

@@ -0,0 +1,8 @@
+import type { ShaderLabLayerConfig, ShaderLabParameterValue, ShaderLabTimelineTrack } from "./types";
+export interface EvaluatedLayerState {
+    layerId: string;
+    params: Record<string, ShaderLabParameterValue>;
+    properties: Partial<Record<"hue" | "opacity" | "saturation" | "visible", boolean | number>>;
+}
+export declare function evaluateTimelineForLayers(layers: ShaderLabLayerConfig[], tracks: ShaderLabTimelineTrack[], time: number): EvaluatedLayerState[];
+export declare function resolveEvaluatedLayers(layers: ShaderLabLayerConfig[], tracks: ShaderLabTimelineTrack[], time: number): ShaderLabLayerConfig[];