From c555f1eaebff90749bdc543592cfa80a060b29e2 Mon Sep 17 00:00:00 2001 From: cashmere Date: Sun, 9 Aug 2026 02:37:37 +0200 Subject: feat: lens effects tab, standalone motion effects, clip/asset rename, preview popout - New Lens category in the assets panel: Blur, Motion Blur, Zoom In/Out, Pan x4, Shake, Pulse, Spin, Custom Zoom. EffectDefinition gains a category field; tabs with an empty category are hidden, and the properties-panel 'Open effects' button opens the first non-empty one. - Motion effects work standalone: dropping them on the timeline creates an effect-track element that animates (scale/translate/rotate) every track below it, computed purely in the TS frame descriptor - no wasm changes, identical in preview and export. supportsStandalone removed. - Motion Blur: directional gaussian smear (amount + angle) reusing the existing WGSL shader with arbitrary u_direction. - Custom Zoom: start/end scale params (keyframable clip-level). - MotionOffset gains optional rotate, accumulated clip-level and applied to standalone layer quads via rotationDegrees. - Rename clips (timeline context menu) and media assets (media panel context menu) via a shared RenameDialog; asset rename persists through storageService with rollback on error. - Preview pops out into a Document Picture-in-Picture window and docks back; button hidden where the API is unsupported. - Export keeps running when the export popover is closed; only the explicit Cancel button aborts. - Captions and Adjustment tabs removed from the assets panel. --- apps/web/src/effects/definitions/blur.ts | 1 + apps/web/src/effects/definitions/index.ts | 10 ++- apps/web/src/effects/definitions/motion-blur.ts | 67 ++++++++++++++ apps/web/src/effects/definitions/motion.ts | 115 +++++++++++++++++++++++- 4 files changed, 190 insertions(+), 3 deletions(-) create mode 100644 apps/web/src/effects/definitions/motion-blur.ts (limited to 'apps/web/src/effects/definitions') diff --git a/apps/web/src/effects/definitions/blur.ts b/apps/web/src/effects/definitions/blur.ts index 194196e9..672e0cd4 100644 --- a/apps/web/src/effects/definitions/blur.ts +++ b/apps/web/src/effects/definitions/blur.ts @@ -69,6 +69,7 @@ export const blurEffectDefinition: EffectDefinition = { type: "blur", name: "Blur", keywords: ["blur", "soft", "defocus"], + category: "lens", params: [ { key: "intensity", diff --git a/apps/web/src/effects/definitions/index.ts b/apps/web/src/effects/definitions/index.ts index e38e5710..d2961c13 100644 --- a/apps/web/src/effects/definitions/index.ts +++ b/apps/web/src/effects/definitions/index.ts @@ -1,8 +1,14 @@ import { effectsRegistry } from "../registry"; import { blurEffectDefinition } from "./blur"; -import { motionEffectDefinitions } from "./motion"; +import { motionBlurEffectDefinition } from "./motion-blur"; +import { motionEffectDefinitions, customZoomEffectDefinition } from "./motion"; -const defaultEffects = [blurEffectDefinition, ...motionEffectDefinitions]; +const defaultEffects = [ + blurEffectDefinition, + motionBlurEffectDefinition, + customZoomEffectDefinition, + ...motionEffectDefinitions, +]; export function registerDefaultEffects(): void { for (const definition of defaultEffects) { diff --git a/apps/web/src/effects/definitions/motion-blur.ts b/apps/web/src/effects/definitions/motion-blur.ts new file mode 100644 index 00000000..b20e6c26 --- /dev/null +++ b/apps/web/src/effects/definitions/motion-blur.ts @@ -0,0 +1,67 @@ +import type { EffectDefinition } from "@/effects/types"; +import { GAUSSIAN_BLUR_SHADER, intensityToSigma } from "./blur"; + +const MAX_SINGLE_PASS_SIGMA = 10; +const MIN_SIGMA = 0.001; + +function parseNumericParam({ + effectParams, + key, +}: { + effectParams: Record; + key: string; +}): number { + const raw = effectParams[key]; + return typeof raw === "number" ? raw : Number.parseFloat(String(raw)); +} + +export const motionBlurEffectDefinition: EffectDefinition = { + type: "motion-blur", + name: "Motion Blur", + keywords: ["motion blur", "smear", "directional", "speed", "streak"], + category: "lens", + params: [ + { + key: "amount", + label: "Amount", + type: "number", + default: 40, + min: 0, + max: 100, + step: 1, + }, + { + key: "angle", + label: "Angle", + type: "number", + default: 0, + min: -180, + max: 180, + step: 1, + }, + ], + renderer: { + passes: [], + buildPasses: ({ effectParams, width }) => { + const sigma = intensityToSigma({ + intensity: parseNumericParam({ effectParams, key: "amount" }), + resolution: width, + reference: 1920, + }); + if (sigma < MIN_SIGMA) return []; + + const angleRad = + (parseNumericParam({ effectParams, key: "angle" }) * Math.PI) / 180; + return [ + { + shader: GAUSSIAN_BLUR_SHADER, + uniforms: { + u_sigma: Math.min(sigma, MAX_SINGLE_PASS_SIGMA), + u_step: Math.max(1, sigma / MAX_SINGLE_PASS_SIGMA), + u_direction: [Math.cos(angleRad), Math.sin(angleRad)], + }, + }, + ]; + }, + }, +}; diff --git a/apps/web/src/effects/definitions/motion.ts b/apps/web/src/effects/definitions/motion.ts index 8c81d801..2e3292a2 100644 --- a/apps/web/src/effects/definitions/motion.ts +++ b/apps/web/src/effects/definitions/motion.ts @@ -5,6 +5,76 @@ import { MOTION_EASING_OPTIONS, getMotionIntensity } from "@/effects/motion"; const ZOOM_RANGE = 0.35; const PAN_ZOOM_HEADROOM = 0.15; const PAN_TRAVEL = 0.06; +const SHAKE_SCALE_HEADROOM = 0.08; +const SHAKE_TRAVEL_X = 0.025; +const SHAKE_TRAVEL_Y = 0.02; +const SHAKE_FREQUENCY = 6; +const SHAKE_Y_DETUNE = 1.31; +const PULSE_RANGE = 0.12; +const PULSE_FREQUENCY = 3; +const SPIN_FULL_TURN_DEGREES = 360; +const CUSTOM_ZOOM_MIN_SCALE = 25; +const CUSTOM_ZOOM_MAX_SCALE = 400; + +function readScaleParam({ + effectParams, + key, +}: { + effectParams: ParamValues; + key: string; +}): number { + const raw = effectParams[key]; + const value = typeof raw === "number" ? raw : Number.parseFloat(String(raw)); + return Number.isFinite(value) ? value : 100; +} + +export const customZoomEffectDefinition: EffectDefinition = { + type: "custom-zoom", + name: "Custom Zoom", + keywords: ["zoom", "ken burns", "custom", "scale", "start", "end"], + category: "lens", + params: [ + { + key: "startScale", + label: "Start scale", + type: "number", + default: 100, + min: CUSTOM_ZOOM_MIN_SCALE, + max: CUSTOM_ZOOM_MAX_SCALE, + step: 1, + keyframable: true, + }, + { + key: "endScale", + label: "End scale", + type: "number", + default: 135, + min: CUSTOM_ZOOM_MIN_SCALE, + max: CUSTOM_ZOOM_MAX_SCALE, + step: 1, + keyframable: true, + }, + { + key: "easing", + label: "Easing", + type: "select", + default: "smooth", + options: MOTION_EASING_OPTIONS, + }, + ], + renderer: { passes: [] }, + motion: { + evaluate: ({ effectParams, progress }) => { + const startScale = readScaleParam({ effectParams, key: "startScale" }); + const endScale = readScaleParam({ effectParams, key: "endScale" }); + return { + scale: (startScale + (endScale - startScale) * progress) / 100, + translateX: 0, + translateY: 0, + }; + }, + }, +}; function motionParams(): ParamDefinition[] { return [ @@ -79,10 +149,10 @@ function buildMotionDefinition({ type, name, keywords, + category: "lens", params: motionParams(), renderer: { passes: [] }, motion: { evaluate }, - supportsStandalone: false, }; } @@ -129,4 +199,47 @@ export const motionEffectDefinitions: EffectDefinition[] = [ evaluate: ({ effectParams, progress }) => panOffset({ effectParams, progress, axis: "y", direction: 1 }), }), + buildMotionDefinition({ + type: "shake", + name: "Shake", + keywords: ["shake", "camera", "handheld", "wobble", "jitter"], + evaluate: ({ effectParams, progress }) => { + const intensity = getMotionIntensity({ effectParams }); + const angle = progress * Math.PI * 2 * SHAKE_FREQUENCY; + return { + scale: 1 + SHAKE_SCALE_HEADROOM * intensity, + translateX: Math.sin(angle) * SHAKE_TRAVEL_X * intensity, + translateY: + Math.cos(angle * SHAKE_Y_DETUNE) * SHAKE_TRAVEL_Y * intensity, + }; + }, + }), + buildMotionDefinition({ + type: "pulse", + name: "Pulse", + keywords: ["pulse", "beat", "pump", "scale", "bounce"], + evaluate: ({ effectParams, progress }) => ({ + scale: + 1 + + Math.sin(progress * Math.PI * 2 * PULSE_FREQUENCY) * + PULSE_RANGE * + getMotionIntensity({ effectParams }), + translateX: 0, + translateY: 0, + }), + }), + buildMotionDefinition({ + type: "spin", + name: "Spin", + keywords: ["spin", "rotate", "turn", "twirl"], + evaluate: ({ effectParams, progress }) => ({ + scale: 1, + translateX: 0, + translateY: 0, + rotate: + progress * + SPIN_FULL_TURN_DEGREES * + getMotionIntensity({ effectParams }), + }), + }), ]; -- cgit v1.3.1