From 216e3e0c397be3719a94e1a22bc1c2ce2de3856c Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 28 Feb 2026 18:41:22 +0100
Subject: feat: introduce WebGL effects system and Blur effect

This implements the foundational architecture for video effects, starting with a multi-pass WebGL rendering pipeline and a customizable Gaussian Blur effect.

Key changes:
- WebGL Engine: Added `raw-loader` for `.glsl` shaders, multi-pass framebuffer rendering, and live offscreen canvas previews.
- Node Architecture: Replaced hardcoded background blur with `CompositeEffectNode` and added `EffectLayerNode` to apply effects to specific visual elements.
- Timeline & DND: Added a new `effect` track type. Upgraded drag-and-drop to support dropping effects directly onto the timeline. Consolidated track constants into a cleaner `TRACK_CONFIG`.
- UI/UX: Added an Effects tab in the assets panel with live previews. Added an Effect Properties panel with sliders and inputs for fine-tuning parameters.
- Data Model: Added `sourceDuration` to video and audio elements, and wrote a v8 storage migration to update existing projects to the new schema.
- Docs: Added `CHANGELOG.md` tracking v0.1.0 and v0.2.0, plus `docs/effects-renderer.md` to document the new WebGL pipeline.
---
 apps/web/src/hooks/use-effect-preview.ts | 47 ++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 apps/web/src/hooks/use-effect-preview.ts

(limited to 'apps/web/src/hooks/use-effect-preview.ts')

diff --git a/apps/web/src/hooks/use-effect-preview.ts b/apps/web/src/hooks/use-effect-preview.ts
new file mode 100644
index 00000000..a84781e0
--- /dev/null
+++ b/apps/web/src/hooks/use-effect-preview.ts
@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import { effectPreviewService } from "@/services/renderer/effect-preview";
+import type { EffectParamValues } from "@/types/effects";
+
+export function useEffectPreview({
+	effectType,
+	params,
+	canvasRef,
+	isActive,
+}: {
+	effectType: string;
+	params: EffectParamValues;
+	canvasRef: React.RefObject<HTMLCanvasElement | null>;
+	isActive: boolean;
+}): void {
+	const requestRef = useRef<number>(0);
+
+	useEffect(() => {
+		if (!isActive) {
+			if (requestRef.current) {
+				cancelAnimationFrame(requestRef.current);
+				requestRef.current = 0;
+			}
+			return;
+		}
+
+		const loop = (): void => {
+			const canvas = canvasRef.current;
+			if (canvas) {
+				effectPreviewService.renderPreview({
+					effectType,
+					params,
+					targetCanvas: canvas,
+				});
+			}
+			requestRef.current = requestAnimationFrame(loop);
+		};
+
+		requestRef.current = requestAnimationFrame(loop);
+
+		return () => {
+			if (requestRef.current) {
+				cancelAnimationFrame(requestRef.current);
+			}
+		};
+	}, [effectType, params, canvasRef, isActive]);
+}
-- 
cgit v1.3.1