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.

6 files changed, 160 insertions, 0 deletions

diff --git a/apps/web/src/lib/effects/definitions/blur.frag.glsl b/apps/web/src/lib/effects/definitions/blur.frag.glsl
new file mode 100644
index 00000000..2c015725
--- /dev/null
+++ b/apps/web/src/lib/effects/definitions/blur.frag.glsl
@@ -0,0 +1,25 @@
+precision mediump float;
+
+uniform sampler2D u_texture;
+uniform vec2 u_resolution;
+uniform float u_sigma;
+uniform vec2 u_direction;
+
+varying vec2 v_texCoord;
+
+void main() {
+  vec2 texelSize = 1.0 / u_resolution;
+
+  vec4 color = vec4(0.0);
+  float totalWeight = 0.0;
+
+  // step=1 texel — scaling step size instead causes discrete ghosting artifacts
+  for (int i = -30; i <= 30; i++) {
+    float fi = float(i);
+    float weight = exp(-(fi * fi) / (2.0 * u_sigma * u_sigma));
+    color += texture2D(u_texture, v_texCoord + texelSize * u_direction * fi) * weight;
+    totalWeight += weight;
+  }
+
+  gl_FragColor = color / totalWeight;
+}
diff --git a/apps/web/src/lib/effects/definitions/blur.ts b/apps/web/src/lib/effects/definitions/blur.ts
new file mode 100644
index 00000000..3a8f691a
--- /dev/null
+++ b/apps/web/src/lib/effects/definitions/blur.ts
@@ -0,0 +1,50 @@
+import type { EffectDefinition } from "@/types/effects";
+import blurFragmentShader from "./blur.frag.glsl";
+
+export const blurEffectDefinition: EffectDefinition = {
+	type: "blur",
+	name: "Blur",
+	keywords: ["blur", "soft", "defocus"],
+	params: [
+		{
+			key: "intensity",
+			label: "Intensity",
+			type: "number",
+			default: 15,
+			min: 0,
+			max: 100,
+			step: 1,
+		},
+	],
+	renderer: {
+		type: "webgl",
+		passes: [
+			{
+				fragmentShader: blurFragmentShader,
+				uniforms: ({ effectParams }) => {
+					const intensity =
+						typeof effectParams.intensity === "number"
+							? effectParams.intensity
+							: Number.parseFloat(String(effectParams.intensity));
+					return {
+						u_sigma: Math.max(intensity / 5, 0.001),
+						u_direction: [1, 0],
+					};
+				},
+			},
+			{
+				fragmentShader: blurFragmentShader,
+				uniforms: ({ effectParams }) => {
+					const intensity =
+						typeof effectParams.intensity === "number"
+							? effectParams.intensity
+							: Number.parseFloat(String(effectParams.intensity));
+					return {
+						u_sigma: Math.max(intensity / 5, 0.001),
+						u_direction: [0, 1],
+					};
+				},
+			},
+		],
+	},
+};
diff --git a/apps/web/src/lib/effects/definitions/index.ts b/apps/web/src/lib/effects/definitions/index.ts
new file mode 100644
index 00000000..1742b1d7
--- /dev/null
+++ b/apps/web/src/lib/effects/definitions/index.ts
@@ -0,0 +1,13 @@
+import { hasEffect, registerEffect } from "../registry";
+import { blurEffectDefinition } from "./blur";
+
+const defaultEffects = [blurEffectDefinition];
+
+export function registerDefaultEffects(): void {
+	for (const definition of defaultEffects) {
+		if (hasEffect({ effectType: definition.type })) {
+			continue;
+		}
+		registerEffect({ definition });
+	}
+}
diff --git a/apps/web/src/lib/effects/effect.vert.glsl b/apps/web/src/lib/effects/effect.vert.glsl
new file mode 100644
index 00000000..5febc835
--- /dev/null
+++ b/apps/web/src/lib/effects/effect.vert.glsl
@@ -0,0 +1,7 @@
+attribute vec2 a_position;
+varying vec2 v_texCoord;
+
+void main() {
+  v_texCoord = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
diff --git a/apps/web/src/lib/effects/index.ts b/apps/web/src/lib/effects/index.ts
new file mode 100644
index 00000000..14d06d84
--- /dev/null
+++ b/apps/web/src/lib/effects/index.ts
@@ -0,0 +1,34 @@
+import { generateUUID } from "@/utils/id";
+import { getEffect } from "./registry";
+import type { Effect, EffectParamValues } from "@/types/effects";
+import type { VisualElement } from "@/types/timeline";
+
+export { getEffect, getAllEffects, hasEffect, registerEffect } from "./registry";
+export { registerDefaultEffects } from "./definitions";
+
+export const EFFECT_TARGET_ELEMENT_TYPES: VisualElement["type"][] = [
+	"video",
+	"image",
+	"text",
+	"sticker",
+];
+
+export function buildDefaultEffectInstance({
+	effectType,
+}: {
+	effectType: string;
+}): Effect {
+	const definition = getEffect({ effectType });
+
+	const params: EffectParamValues = {};
+	for (const paramDef of definition.params) {
+		params[paramDef.key] = paramDef.default;
+	}
+
+	return {
+		id: generateUUID(),
+		type: effectType,
+		params,
+		enabled: true,
+	};
+}
diff --git a/apps/web/src/lib/effects/registry.ts b/apps/web/src/lib/effects/registry.ts
new file mode 100644
index 00000000..568b8924
--- /dev/null
+++ b/apps/web/src/lib/effects/registry.ts
@@ -0,0 +1,31 @@
+import type { EffectDefinition } from "@/types/effects";
+
+const effectDefinitions = new Map<string, EffectDefinition>();
+
+export function registerEffect({
+	definition,
+}: {
+	definition: EffectDefinition;
+}): void {
+	effectDefinitions.set(definition.type, definition);
+}
+
+export function hasEffect({ effectType }: { effectType: string }): boolean {
+	return effectDefinitions.has(effectType);
+}
+
+export function getEffect({
+	effectType,
+}: {
+	effectType: string;
+}): EffectDefinition {
+	const definition = effectDefinitions.get(effectType);
+	if (!definition) {
+		throw new Error(`Unknown effect type: ${effectType}`);
+	}
+	return definition;
+}
+
+export function getAllEffects(): EffectDefinition[] {
+	return Array.from(effectDefinitions.values());
+}