refactor: rewrite animation system to use bindings and scalar channels

1 files changed, 26 insertions, 7 deletions

diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts
index edbf5198..d0f01104 100644
--- a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts
+++ b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts
@@ -1,8 +1,13 @@
 import { EditorCore } from "@/core";
 import { Command, type CommandResult } from "@/lib/commands/base-command";
-import { upsertEffectParamKeyframe } from "@/lib/animation/effect-param-channel";
+import {
+	buildEffectParamPath,
+	resolveAnimationTarget,
+	upsertPathKeyframe,
+} from "@/lib/animation";
 import { updateElementInTracks } from "@/lib/timeline";
 import { isVisualElement } from "@/lib/timeline/element-utils";
+import type { AnimationInterpolation } from "@/lib/animation/types";
 import type { TimelineTrack } from "@/lib/timeline";
 
 export class UpsertEffectParamKeyframeCommand extends Command {
@@ -12,8 +17,8 @@ export class UpsertEffectParamKeyframeCommand extends Command {
 	private readonly effectId: string;
 	private readonly paramKey: string;
 	private readonly time: number;
-	private readonly value: number;
-	private readonly interpolation: "linear" | "hold" | undefined;
+	private readonly value: number | string | boolean;
+	private readonly interpolation: AnimationInterpolation | undefined;
 	private readonly keyframeId: string | undefined;
 
 	constructor({
@@ -31,8 +36,8 @@ export class UpsertEffectParamKeyframeCommand extends Command {
 		effectId: string;
 		paramKey: string;
 		time: number;
-		value: number;
-		interpolation?: "linear" | "hold";
+		value: number | string | boolean;
+		interpolation?: AnimationInterpolation;
 		keyframeId?: string;
 	}) {
 		super();
@@ -57,14 +62,28 @@ export class UpsertEffectParamKeyframeCommand extends Command {
 			elementPredicate: isVisualElement,
 			update: (element) => {
 				const boundedTime = Math.max(0, Math.min(this.time, element.duration));
-				const animations = upsertEffectParamKeyframe({
-					animations: element.animations,
+				const propertyPath = buildEffectParamPath({
 					effectId: this.effectId,
 					paramKey: this.paramKey,
+				});
+				const target = resolveAnimationTarget({
+					element,
+					path: propertyPath,
+				});
+				if (!target) {
+					return element;
+				}
+
+				const animations = upsertPathKeyframe({
+					animations: element.animations,
+					propertyPath,
 					time: boundedTime,
 					value: this.value,
 					interpolation: this.interpolation,
 					keyframeId: this.keyframeId,
+					kind: target.kind,
+					defaultInterpolation: target.defaultInterpolation,
+					coerceValue: target.coerceValue,
 				});
 				return { ...element, animations };
 			},