feat: masks, properties refactor, shaders, storage migrations, and more

apps/web/src/services/renderer/nodes/blur-background-node.ts

@@ -0,0 +1,149 @@
+import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
+import { buildGaussianBlurPasses } from "@/lib/effects/definitions/blur";
+import { getSourceTimeAtClipTime } from "@/lib/retime";
+import { videoCache } from "@/services/video-cache/service";
+import type { RetimeConfig } from "@/lib/timeline";
+import type { CanvasRenderer } from "../canvas-renderer";
+import { createOffscreenCanvas } from "../canvas-utils";
+import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
+import { BaseNode } from "./base-node";
+import { loadImageSource, type CachedImageSource } from "./image-node";
+
+export type BlurBackgroundNodeParams = {
+	mediaId: string;
+	url: string;
+	file: File;
+	mediaType: "video" | "image";
+	duration: number;
+	timeOffset: number;
+	trimStart: number;
+	trimEnd: number;
+	retime?: RetimeConfig;
+	blurIntensity: number;
+};
+
+type BackdropSource = {
+	source: CanvasImageSource;
+	width: number;
+	height: number;
+};
+
+export class BlurBackgroundNode extends BaseNode<BlurBackgroundNodeParams> {
+	private cachedImageSource: Promise<CachedImageSource> | null;
+
+	constructor(params: BlurBackgroundNodeParams) {
+		super(params);
+		this.cachedImageSource =
+			params.mediaType === "image" ? loadImageSource(params.url) : null;
+	}
+
+	private isInRange({ time }: { time: number }): boolean {
+		const localTime = time - this.params.timeOffset;
+		return (
+			localTime >= -TIME_EPSILON_SECONDS && localTime < this.params.duration
+		);
+	}
+
+	private getSourceLocalTime({ time }: { time: number }): number {
+		const clipTime = time - this.params.timeOffset;
+		return (
+			this.params.trimStart +
+			getSourceTimeAtClipTime({
+				clipTime,
+				retime: this.params.retime,
+			})
+		);
+	}
+
+	private async getBackdropSource({
+		time,
+	}: {
+		time: number;
+	}): Promise<BackdropSource | null> {
+		if (this.params.mediaType === "video") {
+			const frame = await videoCache.getFrameAt({
+				mediaId: this.params.mediaId,
+				file: this.params.file,
+				time: this.getSourceLocalTime({ time }),
+			});
+
+			if (!frame) {
+				return null;
+			}
+
+			return {
+				source: frame.canvas,
+				width: frame.canvas.width,
+				height: frame.canvas.height,
+			};
+		}
+
+		if (!this.cachedImageSource) {
+			return null;
+		}
+
+		const { source, width, height } = await this.cachedImageSource;
+		return { source, width, height };
+	}
+
+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
+		await super.render({ renderer, time });
+
+		if (!this.isInRange({ time })) {
+			return;
+		}
+
+		const backdropSource = await this.getBackdropSource({ time });
+		if (!backdropSource) {
+			return;
+		}
+
+		const offscreen = createOffscreenCanvas({
+			width: renderer.width,
+			height: renderer.height,
+		});
+		const offscreenCtx = offscreen.getContext("2d") as
+			| CanvasRenderingContext2D
+			| OffscreenCanvasRenderingContext2D
+			| null;
+		if (!offscreenCtx) {
+			return;
+		}
+
+		const coverScale = Math.max(
+			renderer.width / backdropSource.width,
+			renderer.height / backdropSource.height,
+		);
+		const scaledWidth = backdropSource.width * coverScale;
+		const scaledHeight = backdropSource.height * coverScale;
+		const offsetX = (renderer.width - scaledWidth) / 2;
+		const offsetY = (renderer.height - scaledHeight) / 2;
+
+		offscreenCtx.drawImage(
+			backdropSource.source,
+			offsetX,
+			offsetY,
+			scaledWidth,
+			scaledHeight,
+		);
+
+		const passes = buildGaussianBlurPasses({
+			sigmaX: this.params.blurIntensity * (renderer.width / 1920),
+			sigmaY: this.params.blurIntensity * (renderer.height / 1080),
+		});
+		const effectResult = webglEffectRenderer.applyEffect({
+			source: offscreen as CanvasImageSource,
+			width: renderer.width,
+			height: renderer.height,
+			passes,
+		});
+
+		renderer.context.drawImage(
+			effectResult,
+			0,
+			0,
+			renderer.width,
+			renderer.height,
+		);
+	}
+}

apps/web/src/services/renderer/nodes/composite-effect-node.ts

@@ -1,77 +0,0 @@
-import type { CanvasRenderer } from "../canvas-renderer";
-import { createOffscreenCanvas } from "../canvas-utils";
-import { getEffect } from "@/lib/effects";
-import type { EffectParamValues } from "@/types/effects";
-import { BaseNode } from "./base-node";
-import { webglEffectRenderer } from "../webgl-effect-renderer";
-
-export type CompositeEffectNodeParams = {
-	contentNodes: BaseNode[];
-	effectType: string;
-	effectParams: EffectParamValues;
-	scale: number;
-};
-
-export class CompositeEffectNode extends BaseNode<CompositeEffectNodeParams> {
-	async render({
-		renderer,
-		time,
-	}: {
-		renderer: CanvasRenderer;
-		time: number;
-	}): Promise<void> {
-		const offscreen = createOffscreenCanvas({
-			width: renderer.width,
-			height: renderer.height,
-		});
-		const offscreenCtx = offscreen.getContext("2d") as OffscreenCanvasRenderingContext2D | null;
-		if (!offscreenCtx) {
-			throw new Error("failed to get offscreen canvas context");
-		}
-
-		const originalContext = renderer.context;
-		renderer.context = offscreenCtx;
-
-		for (const node of this.params.contentNodes) {
-			await node.render({ renderer, time });
-		}
-
-		renderer.context = originalContext;
-
-		const effectDefinition = getEffect({ effectType: this.params.effectType });
-		const scale = this.params.scale;
-		const scaledWidth = renderer.width * scale;
-		const scaledHeight = renderer.height * scale;
-		const offsetX = (renderer.width - scaledWidth) / 2;
-		const offsetY = (renderer.height - scaledHeight) / 2;
-
-		const passes = effectDefinition.renderer.passes.map((pass) => ({
-			fragmentShader: pass.fragmentShader,
-			uniforms: pass.uniforms({
-				effectParams: this.params.effectParams,
-				width: renderer.width,
-				height: renderer.height,
-			}),
-		}));
-		const effectResult = webglEffectRenderer.applyEffect({
-			source: offscreen as CanvasImageSource,
-			width: renderer.width,
-			height: renderer.height,
-			passes,
-		});
-
-		renderer.context.save();
-		renderer.context.drawImage(
-			effectResult,
-			0,
-			0,
-			renderer.width,
-			renderer.height,
-			offsetX,
-			offsetY,
-			scaledWidth,
-			scaledHeight,
-		);
-		renderer.context.restore();
-	}
-}

apps/web/src/services/renderer/nodes/effect-layer-node.ts

@@ -1,14 +1,14 @@
 import type { CanvasRenderer } from "../canvas-renderer";
-import { getEffect } from "@/lib/effects";
-import type { EffectParamValues } from "@/types/effects";
+import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
+import type { ParamValues } from "@/lib/params";
 import { BaseNode } from "./base-node";
-import { webglEffectRenderer } from "../webgl-effect-renderer";
+import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
 
 const TIME_EPSILON = 1e-6;
 
 export type EffectLayerNodeParams = {
 	effectType: string;
-	effectParams: EffectParamValues;
+	effectParams: ParamValues;
 	timeOffset: number;
 	duration: number;
 };
@@ -49,18 +49,17 @@ export class EffectLayerNode extends BaseNode<EffectLayerNodeParams> {
 
 		const source = renderer.context.canvas as CanvasImageSource;
 
-		const effectDefinition = getEffect({
-			effectType: this.params.effectType,
-		});
+		const effectDefinition = effectsRegistry.get(this.params.effectType);
 
-		const passes = effectDefinition.renderer.passes.map((pass) => ({
-			fragmentShader: pass.fragmentShader,
-			uniforms: pass.uniforms({
-				effectParams: this.params.effectParams,
-				width: renderer.width,
-				height: renderer.height,
-			}),
-		}));
+		const passes = resolveEffectPasses({
+			definition: effectDefinition,
+			effectParams: this.params.effectParams,
+			width: renderer.width,
+			height: renderer.height,
+		});
+		if (passes.length === 0) {
+			return;
+		}
 		const effectResult = webglEffectRenderer.applyEffect({
 			source,
 			width: renderer.width,

apps/web/src/services/renderer/nodes/graphic-node.ts

@@ -0,0 +1,92 @@
+import type { CanvasRenderer } from "../canvas-renderer";
+import { createOffscreenCanvas } from "../canvas-utils";
+import {
+	DEFAULT_GRAPHIC_SOURCE_SIZE,
+	getGraphicDefinition,
+	registerDefaultGraphics,
+} from "@/lib/graphics";
+import { resolveGraphicParamsAtTime } from "@/lib/animation";
+import type { ParamValues } from "@/lib/params";
+import { VisualNode, type VisualNodeParams } from "./visual-node";
+
+export interface GraphicNodeParams extends VisualNodeParams {
+	definitionId: string;
+	params: ParamValues;
+}
+
+export class GraphicNode extends VisualNode<GraphicNodeParams> {
+	private cachedKey: string | null = null;
+	private cachedSource: OffscreenCanvas | HTMLCanvasElement | null = null;
+
+	constructor(params: GraphicNodeParams) {
+		super(params);
+		registerDefaultGraphics();
+	}
+
+	private getSource({
+		localTime,
+	}: {
+		localTime: number;
+	}): OffscreenCanvas | HTMLCanvasElement | null {
+		const definition = getGraphicDefinition({
+			definitionId: this.params.definitionId,
+		});
+		const resolvedParams = resolveGraphicParamsAtTime({
+			element: this.params,
+			localTime,
+		});
+		const cacheKey = JSON.stringify({
+			definitionId: this.params.definitionId,
+			params: resolvedParams,
+		});
+		if (this.cachedSource && this.cachedKey === cacheKey) {
+			return this.cachedSource;
+		}
+
+		const canvas = createOffscreenCanvas({
+			width: DEFAULT_GRAPHIC_SOURCE_SIZE,
+			height: DEFAULT_GRAPHIC_SOURCE_SIZE,
+		});
+		const ctx = canvas.getContext("2d") as
+			| CanvasRenderingContext2D
+			| OffscreenCanvasRenderingContext2D
+			| null;
+		if (!ctx) {
+			return null;
+		}
+
+		definition.render({
+			ctx,
+			params: resolvedParams,
+			width: DEFAULT_GRAPHIC_SOURCE_SIZE,
+			height: DEFAULT_GRAPHIC_SOURCE_SIZE,
+		});
+
+		this.cachedKey = cacheKey;
+		this.cachedSource = canvas;
+		return canvas;
+	}
+
+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
+		await super.render({ renderer, time });
+
+		if (!this.isInRange({ time })) {
+			return;
+		}
+
+		const source = this.getSource({
+			localTime: this.getAnimationLocalTime({ time }),
+		});
+		if (!source) {
+			return;
+		}
+
+		this.renderVisual({
+			renderer,
+			source,
+			sourceWidth: DEFAULT_GRAPHIC_SOURCE_SIZE,
+			sourceHeight: DEFAULT_GRAPHIC_SOURCE_SIZE,
+			timelineTime: time,
+		});
+	}
+}

apps/web/src/services/renderer/nodes/image-node.ts

@@ -6,7 +6,7 @@ export interface ImageNodeParams extends VisualNodeParams {
 	maxSourceSize?: number;
 }
 
-interface CachedImageSource {
+export interface CachedImageSource {
 	source: HTMLImageElement | OffscreenCanvas;
 	width: number;
 	height: number;
@@ -14,7 +14,7 @@ interface CachedImageSource {
 
 const imageSourceCache = new Map<string, Promise<CachedImageSource>>();
 
-function loadImageSource(
+export function loadImageSource(
 	url: string,
 	maxSourceSize?: number,
 ): Promise<CachedImageSource> {

apps/web/src/services/renderer/nodes/sticker-node.ts

@@ -4,6 +4,8 @@ import { VisualNode, type VisualNodeParams } from "./visual-node";
 
 export interface StickerNodeParams extends VisualNodeParams {
 	stickerId: string;
+	intrinsicWidth?: number;
+	intrinsicHeight?: number;
 }
 
 interface CachedStickerSource {
@@ -14,7 +16,7 @@ interface CachedStickerSource {
 
 const stickerSourceCache = new Map<string, Promise<CachedStickerSource>>();
 
-function loadStickerSource(stickerId: string): Promise<CachedStickerSource> {
+function loadStickerSource({ stickerId }: { stickerId: string }): Promise<CachedStickerSource> {
 	const cached = stickerSourceCache.get(stickerId);
 	if (cached) return cached;
 
@@ -33,7 +35,7 @@ function loadStickerSource(stickerId: string): Promise<CachedStickerSource> {
 			image.src = url;
 		});
 
-		return { source: image, width: 200, height: 200 };
+		return { source: image, width: image.naturalWidth, height: image.naturalHeight };
 	})();
 
 	stickerSourceCache.set(stickerId, promise);
@@ -45,7 +47,7 @@ export class StickerNode extends VisualNode<StickerNodeParams> {
 
 	constructor(params: StickerNodeParams) {
 		super(params);
-		this.cachedSource = loadStickerSource(params.stickerId);
+		this.cachedSource = loadStickerSource({ stickerId: params.stickerId });
 	}
 
 	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
@@ -55,13 +57,19 @@ export class StickerNode extends VisualNode<StickerNodeParams> {
 			return;
 		}
 
-		const { source, width, height } = await this.cachedSource;
+		const { source, width: loadedWidth, height: loadedHeight } =
+			await this.cachedSource;
+
+		// Prefer element-stored intrinsic dimensions as the geometry authority.
+		// The loaded image is only the drawable source.
+		const sourceWidth = this.params.intrinsicWidth ?? loadedWidth;
+		const sourceHeight = this.params.intrinsicHeight ?? loadedHeight;
 
 		this.renderVisual({
 			renderer,
 			source,
-			sourceWidth: width,
-			sourceHeight: height,
+			sourceWidth,
+			sourceHeight,
 			timelineTime: time,
 		});
 	}

apps/web/src/services/renderer/nodes/text-node.ts

@@ -1,12 +1,8 @@
 import type { CanvasRenderer } from "../canvas-renderer";
 import { createOffscreenCanvas } from "../canvas-utils";
 import { BaseNode } from "./base-node";
-import type { TextElement } from "@/types/timeline";
+import type { TextElement } from "@/lib/timeline";
 import {
-	DEFAULT_TEXT_BACKGROUND,
-	DEFAULT_TEXT_ELEMENT,
-	DEFAULT_LINE_HEIGHT,
-	FONT_SIZE_SCALE_REFERENCE,
 	CORNER_RADIUS_MAX,
 	CORNER_RADIUS_MIN,
 } from "@/constants/text-constants";
@@ -14,34 +10,20 @@ import {
 	getMetricAscent,
 	getMetricDescent,
 	getTextBackgroundRect,
-	measureTextBlock,
+	setCanvasLetterSpacing,
 } from "@/lib/text/layout";
+import { measureTextElement } from "@/lib/text/measure-element";
 import {
 	getElementLocalTime,
 	resolveColorAtTime,
-	resolveNumberAtTime,
 	resolveOpacityAtTime,
 	resolveTransformAtTime,
 } from "@/lib/animation";
 import { resolveEffectParamsAtTime } from "@/lib/animation/effect-param-channel";
-import { getEffect } from "@/lib/effects";
-import { webglEffectRenderer } from "../webgl-effect-renderer";
+import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
+import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
 import { clamp } from "@/utils/math";
 
-function scaleFontSize({
-	fontSize,
-	canvasHeight,
-}: {
-	fontSize: number;
-	canvasHeight: number;
-}): number {
-	return fontSize * (canvasHeight / FONT_SIZE_SCALE_REFERENCE);
-}
-
-function quoteFontFamily({ fontFamily }: { fontFamily: string }): string {
-	return `"${fontFamily.replace(/"/g, '\\"')}"`;
-}
-
 const TEXT_DECORATION_THICKNESS_RATIO = 0.07;
 const STRIKETHROUGH_VERTICAL_RATIO = 0.35;
 
@@ -64,9 +46,15 @@ function drawTextDecoration({
 }): void {
 	if (textDecoration === "none" || !textDecoration) return;
 
-	const thickness = Math.max(1, scaledFontSize * TEXT_DECORATION_THICKNESS_RATIO);
+	const thickness = Math.max(
+		1,
+		scaledFontSize * TEXT_DECORATION_THICKNESS_RATIO,
+	);
 	const ascent = getMetricAscent({ metrics, fallbackFontSize: scaledFontSize });
-	const descent = getMetricDescent({ metrics, fallbackFontSize: scaledFontSize });
+	const descent = getMetricDescent({
+		metrics,
+		fallbackFontSize: scaledFontSize,
+	});
 
 	let xStart = -lineWidth / 2;
 	if (textAlign === "left") xStart = 0;
@@ -121,19 +109,6 @@ export class TextNode extends BaseNode<TextNodeParams> {
 		const x = transform.position.x + this.params.canvasCenter.x;
 		const y = transform.position.y + this.params.canvasCenter.y;
 
-		const fontWeight = this.params.fontWeight === "bold" ? "bold" : "normal";
-		const fontStyle = this.params.fontStyle === "italic" ? "italic" : "normal";
-		const scaledFontSize = scaleFontSize({
-			fontSize: this.params.fontSize,
-			canvasHeight: this.params.canvasHeight,
-		});
-		const fontFamily = quoteFontFamily({ fontFamily: this.params.fontFamily });
-		const fontString = `${fontStyle} ${fontWeight} ${scaledFontSize}px ${fontFamily}, sans-serif`;
-		const letterSpacing = this.params.letterSpacing ?? 0;
-		const lineHeight = this.params.lineHeight ?? DEFAULT_LINE_HEIGHT;
-		const lines = this.params.content.split("\n");
-		const lineHeightPx = scaledFontSize * lineHeight;
-		const fontSizeRatio = this.params.fontSize / DEFAULT_TEXT_ELEMENT.fontSize;
 		const baseline = this.params.textBaseline ?? "middle";
 		const blendMode = (
 			this.params.blendMode && this.params.blendMode !== "normal"
@@ -141,73 +116,49 @@ export class TextNode extends BaseNode<TextNodeParams> {
 				: "source-over"
 		) as GlobalCompositeOperation;
 
-	renderer.context.save();
-		renderer.context.font = fontString;
-		renderer.context.textBaseline = baseline;
-		if ("letterSpacing" in renderer.context) {
-			(renderer.context as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = `${letterSpacing}px`;
-		}
-		const lineMetrics = lines.map((line) => renderer.context.measureText(line));
-		renderer.context.restore();
+		const {
+			scaledFontSize,
+			fontString,
+			letterSpacing,
+			lineHeightPx,
+			lines,
+			lineMetrics,
+			block,
+			fontSizeRatio,
+			resolvedBackground,
+		} = measureTextElement({
+			element: this.params,
+			canvasHeight: this.params.canvasHeight,
+			localTime,
+			ctx: renderer.context,
+		});
 
 		const lineCount = lines.length;
-		const block = measureTextBlock({ lineMetrics, lineHeightPx, fallbackFontSize: scaledFontSize });
 
-	const textColor = resolveColorAtTime({
+		const textColor = resolveColorAtTime({
 			baseColor: this.params.color,
 			animations: this.params.animations,
 			propertyPath: "color",
 			localTime,
 		});
-		const bg = this.params.background;
-		const resolvedBackground = {
-			...bg,
+		const resolvedBackgroundWithColor = {
+			...resolvedBackground,
 			color: resolveColorAtTime({
-				baseColor: bg.color,
+				baseColor: this.params.background.color,
 				animations: this.params.animations,
 				propertyPath: "background.color",
 				localTime,
 			}),
-			paddingX: resolveNumberAtTime({
-				baseValue: bg.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX,
-				animations: this.params.animations,
-				propertyPath: "background.paddingX",
-				localTime,
-			}),
-			paddingY: resolveNumberAtTime({
-				baseValue: bg.paddingY ?? DEFAULT_TEXT_BACKGROUND.paddingY,
-				animations: this.params.animations,
-				propertyPath: "background.paddingY",
-				localTime,
-			}),
-			offsetX: resolveNumberAtTime({
-				baseValue: bg.offsetX ?? DEFAULT_TEXT_BACKGROUND.offsetX,
-				animations: this.params.animations,
-				propertyPath: "background.offsetX",
-				localTime,
-			}),
-			offsetY: resolveNumberAtTime({
-				baseValue: bg.offsetY ?? DEFAULT_TEXT_BACKGROUND.offsetY,
-				animations: this.params.animations,
-				propertyPath: "background.offsetY",
-				localTime,
-			}),
-			cornerRadius: resolveNumberAtTime({
-				baseValue: bg.cornerRadius ?? CORNER_RADIUS_MIN,
-				animations: this.params.animations,
-				propertyPath: "background.cornerRadius",
-				localTime,
-			}),
 		};
 
-	const drawContent = (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => {
+		const drawContent = (
+			ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+		) => {
 			ctx.font = fontString;
 			ctx.textAlign = this.params.textAlign;
 			ctx.textBaseline = baseline;
 			ctx.fillStyle = textColor;
-			if ("letterSpacing" in ctx) {
-				(ctx as CanvasRenderingContext2D & { letterSpacing: string }).letterSpacing = `${letterSpacing}px`;
-			}
+			setCanvasLetterSpacing({ ctx, letterSpacingPx: letterSpacing });
 
 			if (
 				this.params.background.enabled &&
@@ -218,17 +169,29 @@ export class TextNode extends BaseNode<TextNodeParams> {
 				const backgroundRect = getTextBackgroundRect({
 					textAlign: this.params.textAlign,
 					block,
-					background: resolvedBackground,
+					background: resolvedBackgroundWithColor,
 					fontSizeRatio,
 				});
 				if (backgroundRect) {
-					const p = clamp({ value: resolvedBackground.cornerRadius, min: CORNER_RADIUS_MIN, max: CORNER_RADIUS_MAX }) / 100;
-					const radius = Math.min(backgroundRect.width, backgroundRect.height) / 2 * p;
-				ctx.fillStyle = resolvedBackground.color;
-				ctx.beginPath();
-				ctx.roundRect(backgroundRect.left, backgroundRect.top, backgroundRect.width, backgroundRect.height, radius);
-				ctx.fill();
-				ctx.fillStyle = textColor;
+					const p =
+						clamp({
+							value: resolvedBackgroundWithColor.cornerRadius,
+							min: CORNER_RADIUS_MIN,
+							max: CORNER_RADIUS_MAX,
+						}) / 100;
+					const radius =
+						(Math.min(backgroundRect.width, backgroundRect.height) / 2) * p;
+					ctx.fillStyle = resolvedBackgroundWithColor.color;
+					ctx.beginPath();
+					ctx.roundRect(
+						backgroundRect.left,
+						backgroundRect.top,
+						backgroundRect.width,
+						backgroundRect.height,
+						radius,
+					);
+					ctx.fill();
+					ctx.fillStyle = textColor;
 				}
 			}
 
@@ -247,15 +210,18 @@ export class TextNode extends BaseNode<TextNodeParams> {
 			}
 		};
 
-		const applyTransform = (ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D) => {
+		const applyTransform = (
+			ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+		) => {
 			ctx.translate(x, y);
-			ctx.scale(transform.scale, transform.scale);
+			ctx.scale(transform.scaleX, transform.scaleY);
 			if (transform.rotate) {
 				ctx.rotate((transform.rotate * Math.PI) / 180);
 			}
 		};
 
-		const enabledEffects = this.params.effects?.filter((effect) => effect.enabled) ?? [];
+		const enabledEffects =
+			this.params.effects?.filter((effect) => effect.enabled) ?? [];
 
 		if (enabledEffects.length === 0) {
 			renderer.context.save();
@@ -269,11 +235,16 @@ export class TextNode extends BaseNode<TextNodeParams> {
 
 		// Effects path: render text to a same-size offscreen canvas so the blur
 		// can spread into the surrounding transparent area without hard clipping.
-		const offscreen = createOffscreenCanvas({ width: renderer.width, height: renderer.height });
-		const offscreenCtx = offscreen.getContext("2d") as OffscreenCanvasRenderingContext2D | null;
+		const offscreen = createOffscreenCanvas({
+			width: renderer.width,
+			height: renderer.height,
+		});
+		const offscreenCtx = offscreen.getContext(
+			"2d",
+		) as OffscreenCanvasRenderingContext2D | null;
 
 		if (!offscreenCtx) {
-		renderer.context.save();
+			renderer.context.save();
 			applyTransform(renderer.context);
 			renderer.context.globalCompositeOperation = blendMode;
 			renderer.context.globalAlpha = opacity;
@@ -294,15 +265,13 @@ export class TextNode extends BaseNode<TextNodeParams> {
 				animations: this.params.animations,
 				localTime,
 			});
-			const definition = getEffect({ effectType: effect.type });
-			const passes = definition.renderer.passes.map((pass) => ({
-				fragmentShader: pass.fragmentShader,
-				uniforms: pass.uniforms({
-					effectParams: resolvedParams,
-					width: renderer.width,
-					height: renderer.height,
-				}),
-			}));
+			const definition = effectsRegistry.get(effect.type);
+			const passes = resolveEffectPasses({
+				definition,
+				effectParams: resolvedParams,
+				width: renderer.width,
+				height: renderer.height,
+			});
 			currentSource = webglEffectRenderer.applyEffect({
 				source: currentSource,
 				width: renderer.width,

apps/web/src/services/renderer/nodes/video-node.ts

@@ -17,6 +17,7 @@ export class VideoNode extends VisualNode<VideoNodeParams> {
 		}
 
 		const videoTime = this.getSourceLocalTime({ time });
+
 		const frame = await videoCache.getFrameAt({
 			mediaId: this.params.mediaId,
 			file: this.params.file,

apps/web/src/services/renderer/nodes/visual-node.ts

@@ -1,10 +1,11 @@
 import type { CanvasRenderer } from "../canvas-renderer";
 import { createOffscreenCanvas } from "../canvas-utils";
 import { BaseNode } from "./base-node";
-import type { Effect } from "@/types/effects";
-import type { BlendMode } from "@/types/rendering";
-import type { Transform } from "@/types/timeline";
-import type { ElementAnimations } from "@/types/animation";
+import type { Effect } from "@/lib/effects/types";
+import type { Mask } from "@/lib/masks/types";
+import type { BlendMode, Transform } from "@/lib/rendering";
+import type { ElementAnimations } from "@/lib/animation/types";
+import type { RetimeConfig } from "@/lib/timeline";
 import {
 	getElementLocalTime,
 	resolveOpacityAtTime,
@@ -12,26 +13,38 @@ import {
 } from "@/lib/animation";
 import { resolveEffectParamsAtTime } from "@/lib/animation/effect-param-channel";
 import { TIME_EPSILON_SECONDS } from "@/constants/animation-constants";
-import { getEffect } from "@/lib/effects";
-import { webglEffectRenderer } from "../webgl-effect-renderer";
+import { effectsRegistry, resolveEffectPasses } from "@/lib/effects";
+import { masksRegistry } from "@/lib/masks";
+import { getSourceTimeAtClipTime } from "@/lib/retime";
+import { webglEffectRenderer } from "../webgl/webgl-effect-renderer";
+import { applyMaskFeather } from "../mask-feather";
 
 export interface VisualNodeParams {
 	duration: number;
 	timeOffset: number;
 	trimStart: number;
 	trimEnd: number;
+	retime?: RetimeConfig;
 	transform: Transform;
 	animations?: ElementAnimations;
 	opacity: number;
 	blendMode?: BlendMode;
 	effects?: Effect[];
+	masks?: Mask[];
 }
 
 export abstract class VisualNode<
 	Params extends VisualNodeParams = VisualNodeParams,
 > extends BaseNode<Params> {
 	protected getSourceLocalTime({ time }: { time: number }): number {
-		return time - this.params.timeOffset + this.params.trimStart;
+		const clipTime = time - this.params.timeOffset;
+		return (
+			this.params.trimStart +
+			getSourceTimeAtClipTime({
+				clipTime,
+				retime: this.params.retime,
+			})
+		);
 	}
 
 	protected getAnimationLocalTime({ time }: { time: number }): number {
@@ -43,10 +56,10 @@ export abstract class VisualNode<
 	}
 
 	protected isInRange({ time }: { time: number }): boolean {
-		const localTime = this.getSourceLocalTime({ time });
+		const localTime = time - this.params.timeOffset;
 		return (
-			localTime >= this.params.trimStart - TIME_EPSILON_SECONDS &&
-			localTime < this.params.trimStart + this.params.duration
+			localTime >= -TIME_EPSILON_SECONDS &&
+			localTime < this.params.duration
 		);
 	}
 
@@ -65,7 +78,9 @@ export abstract class VisualNode<
 	}): void {
 		renderer.context.save();
 
-		const animationLocalTime = this.getAnimationLocalTime({ time: timelineTime });
+		const animationLocalTime = this.getAnimationLocalTime({
+			time: timelineTime,
+		});
 		const transform = resolveTransformAtTime({
 			baseTransform: this.params.transform,
 			animations: this.params.animations,
@@ -80,10 +95,12 @@ export abstract class VisualNode<
 			renderer.width / sourceWidth,
 			renderer.height / sourceHeight,
 		);
-		const scaledWidth = sourceWidth * containScale * transform.scale;
-		const scaledHeight = sourceHeight * containScale * transform.scale;
-		const x = renderer.width / 2 + transform.position.x - scaledWidth / 2;
-		const y = renderer.height / 2 + transform.position.y - scaledHeight / 2;
+		const scaledWidth = sourceWidth * containScale * transform.scaleX;
+		const scaledHeight = sourceHeight * containScale * transform.scaleY;
+		const absWidth = Math.abs(scaledWidth);
+		const absHeight = Math.abs(scaledHeight);
+		const x = renderer.width / 2 + transform.position.x - absWidth / 2;
+		const y = renderer.height / 2 + transform.position.y - absHeight / 2;
 
 		renderer.context.globalCompositeOperation = (
 			this.params.blendMode && this.params.blendMode !== "normal"
@@ -92,71 +109,187 @@ export abstract class VisualNode<
 		) as GlobalCompositeOperation;
 		renderer.context.globalAlpha = opacity;
 
-		if (transform.rotate !== 0) {
-			const centerX = x + scaledWidth / 2;
-			const centerY = y + scaledHeight / 2;
+		const flipX = scaledWidth < 0 ? -1 : 1;
+		const flipY = scaledHeight < 0 ? -1 : 1;
+		const needsTransform = transform.rotate !== 0 || flipX !== 1 || flipY !== 1;
+
+		if (needsTransform) {
+			const centerX = x + absWidth / 2;
+			const centerY = y + absHeight / 2;
 			renderer.context.translate(centerX, centerY);
 			renderer.context.rotate((transform.rotate * Math.PI) / 180);
+			renderer.context.scale(flipX, flipY);
 			renderer.context.translate(-centerX, -centerY);
 		}
 
 		const enabledEffects =
 			this.params.effects?.filter((effect) => effect.enabled) ?? [];
+		const activeMasks = this.params.masks ?? [];
 
-		if (enabledEffects.length === 0) {
-			renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight);
+		if (activeMasks.length === 0 && enabledEffects.length === 0) {
+			renderer.context.drawImage(source, x, y, absWidth, absHeight);
+			renderer.context.restore();
+			return;
+		}
+
+		const currentResult =
+			enabledEffects.length > 0
+				? this.applyEffects({
+						source,
+						effects: enabledEffects,
+						width: absWidth,
+						height: absHeight,
+						animationLocalTime,
+					})
+				: source;
+
+		if (activeMasks.length === 0) {
+			renderer.context.drawImage(currentResult, x, y, absWidth, absHeight);
 			renderer.context.restore();
 			return;
 		}
 
 		const elementCanvas = createOffscreenCanvas({
-			width: Math.round(scaledWidth),
-			height: Math.round(scaledHeight),
+			width: Math.round(absWidth),
+			height: Math.round(absHeight),
 		});
 		const elementCtx = elementCanvas.getContext("2d") as
 			| CanvasRenderingContext2D
 			| OffscreenCanvasRenderingContext2D
 			| null;
 		if (!elementCtx) {
-			renderer.context.drawImage(source, x, y, scaledWidth, scaledHeight);
+			renderer.context.drawImage(currentResult, x, y, absWidth, absHeight);
 			renderer.context.restore();
 			return;
 		}
 
-		elementCtx.drawImage(source, 0, 0, scaledWidth, scaledHeight);
+		elementCtx.drawImage(currentResult, 0, 0, absWidth, absHeight);
 
-		let currentResult: CanvasImageSource = elementCanvas;
+		for (const mask of activeMasks) {
+			this.applyMask({
+				mask,
+				elementCtx,
+				scaledWidth: absWidth,
+				scaledHeight: absHeight,
+			});
+		}
 
-		for (const effect of enabledEffects) {
+		renderer.context.drawImage(elementCanvas, x, y, absWidth, absHeight);
+		renderer.context.restore();
+	}
+
+	private applyEffects({
+		source,
+		effects,
+		width,
+		height,
+		animationLocalTime,
+	}: {
+		source: CanvasImageSource;
+		effects: Effect[];
+		width: number;
+		height: number;
+		animationLocalTime: number;
+	}): CanvasImageSource {
+		let current: CanvasImageSource = source;
+		for (const effect of effects) {
 			const resolvedParams = resolveEffectParamsAtTime({
 				effect,
 				animations: this.params.animations,
 				localTime: animationLocalTime,
 			});
-			const definition = getEffect({ effectType: effect.type });
-			const passes = definition.renderer.passes.map((pass) => ({
-				fragmentShader: pass.fragmentShader,
-				uniforms: pass.uniforms({
-					effectParams: resolvedParams,
-					width: scaledWidth,
-					height: scaledHeight,
-				}),
-			}));
-			currentResult = webglEffectRenderer.applyEffect({
-				source: currentResult,
-				width: Math.round(scaledWidth),
-				height: Math.round(scaledHeight),
+			const definition = effectsRegistry.get(effect.type);
+			const passes = resolveEffectPasses({
+				definition,
+				effectParams: resolvedParams,
+				width,
+				height,
+			});
+			current = webglEffectRenderer.applyEffect({
+				source: current,
+				width: Math.round(width),
+				height: Math.round(height),
 				passes,
 			});
 		}
+		return current;
+	}
 
-		renderer.context.drawImage(
-			currentResult,
-			x,
-			y,
-			scaledWidth,
-			scaledHeight,
-		);
-		renderer.context.restore();
+	private applyMask({
+		mask,
+		elementCtx,
+		scaledWidth,
+		scaledHeight,
+	}: {
+		mask: Mask;
+		elementCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+		scaledWidth: number;
+		scaledHeight: number;
+	}): void {
+		const definition = masksRegistry.get(mask.type);
+		const { feather, inverted } = mask.params;
+
+		const maskCanvas = createOffscreenCanvas({
+			width: Math.round(scaledWidth),
+			height: Math.round(scaledHeight),
+		});
+		const maskCtx = maskCanvas.getContext("2d") as
+			| CanvasRenderingContext2D
+			| OffscreenCanvasRenderingContext2D
+			| null;
+		if (!maskCtx) return;
+
+		maskCtx.clearRect(0, 0, scaledWidth, scaledHeight);
+
+		let maskResult: CanvasImageSource = maskCanvas;
+		let path: Path2D | null = null;
+
+		if (feather > 0 && definition.renderer.renderMask) {
+			// Bypasses JFA — avoids the two-sided distance artifact where strips
+			// near the canvas edge appear semi-transparent.
+			definition.renderer.renderMask({
+				resolvedParams: mask.params,
+				ctx: maskCtx,
+				width: Math.round(scaledWidth),
+				height: Math.round(scaledHeight),
+				feather,
+			});
+		} else {
+			path = definition.renderer.buildPath({
+				resolvedParams: mask.params,
+				width: scaledWidth,
+				height: scaledHeight,
+			});
+			maskCtx.fillStyle = "white";
+			maskCtx.fill(path);
+
+			if (feather > 0) {
+				maskResult = applyMaskFeather({
+					maskCanvas,
+					width: Math.round(scaledWidth),
+					height: Math.round(scaledHeight),
+					feather,
+				});
+			}
+		}
+
+		elementCtx.globalCompositeOperation = inverted
+			? "destination-out"
+			: "destination-in";
+		elementCtx.drawImage(maskResult, 0, 0, scaledWidth, scaledHeight);
+		elementCtx.globalCompositeOperation = "source-over";
+
+		const strokePath =
+			definition.renderer.buildStrokePath?.({
+				resolvedParams: mask.params,
+				width: scaledWidth,
+				height: scaledHeight,
+			}) ?? path;
+
+		if (mask.params.strokeWidth > 0 && strokePath) {
+			elementCtx.strokeStyle = mask.params.strokeColor;
+			elementCtx.lineWidth = mask.params.strokeWidth;
+			elementCtx.stroke(strokePath);
+		}
 	}
 }