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.
---
 .../editor/panels/properties/effect-properties.tsx | 103 +++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 apps/web/src/components/editor/panels/properties/effect-properties.tsx

(limited to 'apps/web/src/components/editor/panels/properties/effect-properties.tsx')

diff --git a/apps/web/src/components/editor/panels/properties/effect-properties.tsx b/apps/web/src/components/editor/panels/properties/effect-properties.tsx
new file mode 100644
index 00000000..bf137291
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/effect-properties.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import type { EffectElement } from "@/types/timeline";
+import type { EffectParamDefinition } from "@/types/effects";
+import { getEffect } from "@/lib/effects/registry";
+import { useEditor } from "@/hooks/use-editor";
+import { clamp } from "@/utils/math";
+import { Section, SectionContent, SectionHeader, SectionField, SectionFields } from "./section";
+import { Slider } from "@/components/ui/slider";
+import { NumberField } from "@/components/ui/number-field";
+import { usePropertyDraft } from "./hooks/use-property-draft";
+
+function EffectParamField({
+	param,
+	element,
+	trackId,
+}: {
+	param: EffectParamDefinition;
+	element: EffectElement;
+	trackId: string;
+}) {
+	const editor = useEditor();
+
+	const currentValue = Number(element.params[param.key] ?? param.default);
+	const min = param.min ?? 0;
+	const max = param.max ?? 100;
+	const step = param.step ?? 1;
+
+	const updateParam = (value: number) =>
+		editor.timeline.previewElements({
+			updates: [
+				{
+					trackId,
+					elementId: element.id,
+					updates: { params: { ...element.params, [param.key]: value } },
+				},
+			],
+		});
+
+	const commitParam = () => editor.timeline.commitPreview();
+
+	const draft = usePropertyDraft({
+		displayValue: String(currentValue),
+		parse: (input) => {
+			const parsed = parseFloat(input);
+			if (Number.isNaN(parsed)) return null;
+			return clamp({ value: parsed, min, max });
+		},
+		onPreview: updateParam,
+		onCommit: commitParam,
+	});
+
+	return (
+		<SectionField label={param.label}>
+			<div className="flex items-center gap-3">
+				<Slider
+					className="flex-1"
+					min={min}
+					max={max}
+					step={step}
+					value={[currentValue]}
+					onValueChange={([value]) => updateParam(value)}
+					onValueCommit={commitParam}
+				/>
+				<NumberField
+					className="w-16 shrink-0"
+					value={draft.displayValue}
+					onFocus={draft.onFocus}
+					onChange={draft.onChange}
+					onBlur={draft.onBlur}
+				/>
+			</div>
+		</SectionField>
+	);
+}
+
+export function EffectProperties({
+	element,
+	trackId,
+}: {
+	element: EffectElement;
+	trackId: string;
+}) {
+	const definition = getEffect({ effectType: element.effectType });
+
+	return (
+		<Section hasBorderTop={false}>
+			<SectionHeader title={definition.name} />
+			<SectionContent>
+				<SectionFields>
+					{definition.params.map((param) => (
+						<EffectParamField
+							key={param.key}
+							param={param}
+							element={element}
+							trackId={trackId}
+						/>
+					))}
+				</SectionFields>
+			</SectionContent>
+		</Section>
+	);
+}
-- 
cgit v1.3.1