From 1bd9fac203f09736c1225bbbe19e5d7cc31c0b93 Mon Sep 17 00:00:00 2001
From: Maze <mazewinther@gmail.com>
Date: Sun, 5 Apr 2026 13:15:58 +0200
Subject: refactor: rewrite animation system to use bindings and scalar
 channels

---
 apps/web/src/lib/animation/resolve.ts | 309 +++++++++++++++++++---------------
 1 file changed, 174 insertions(+), 135 deletions(-)

(limited to 'apps/web/src/lib/animation/resolve.ts')

diff --git a/apps/web/src/lib/animation/resolve.ts b/apps/web/src/lib/animation/resolve.ts
index 5c356f28..3de97026 100644
--- a/apps/web/src/lib/animation/resolve.ts
+++ b/apps/web/src/lib/animation/resolve.ts
@@ -1,135 +1,174 @@
-import type {
-	AnimationPropertyPath,
-	ElementAnimations,
-} from "@/lib/animation/types";
-import type { Transform } from "@/lib/rendering";
-import {
-	getColorValueAtTime,
-	getNumberChannelValueAtTime,
-	getVectorChannelValueAtTime,
-} from "./interpolation";
-import { getColorChannelForPath } from "./color-channel";
-import { getNumberChannelForPath } from "./number-channel";
-import { getVectorChannelForPath } from "./vector-channel";
-
-export function getElementLocalTime({
-	timelineTime,
-	elementStartTime,
-	elementDuration,
-}: {
-	timelineTime: number;
-	elementStartTime: number;
-	elementDuration: number;
-}): number {
-	const localTime = timelineTime - elementStartTime;
-	if (localTime <= 0) {
-		return 0;
-	}
-
-	if (localTime >= elementDuration) {
-		return elementDuration;
-	}
-
-	return localTime;
-}
-
-export function resolveTransformAtTime({
-	baseTransform,
-	animations,
-	localTime,
-}: {
-	baseTransform: Transform;
-	animations: ElementAnimations | undefined;
-	localTime: number;
-}): Transform {
-	const safeLocalTime = Math.max(0, localTime);
-	return {
-		position: getVectorChannelValueAtTime({
-			channel: getVectorChannelForPath({
-				animations,
-				propertyPath: "transform.position",
-			}),
-			time: safeLocalTime,
-			fallbackValue: baseTransform.position,
-		}),
-		scaleX: getNumberChannelValueAtTime({
-			channel: getNumberChannelForPath({
-				animations,
-				propertyPath: "transform.scaleX",
-			}),
-			time: safeLocalTime,
-			fallbackValue: baseTransform.scaleX,
-		}),
-		scaleY: getNumberChannelValueAtTime({
-			channel: getNumberChannelForPath({
-				animations,
-				propertyPath: "transform.scaleY",
-			}),
-			time: safeLocalTime,
-			fallbackValue: baseTransform.scaleY,
-		}),
-		rotate: getNumberChannelValueAtTime({
-			channel: getNumberChannelForPath({
-				animations,
-				propertyPath: "transform.rotate",
-			}),
-			time: safeLocalTime,
-			fallbackValue: baseTransform.rotate,
-		}),
-	};
-}
-
-export function resolveOpacityAtTime({
-	baseOpacity,
-	animations,
-	localTime,
-}: {
-	baseOpacity: number;
-	animations: ElementAnimations | undefined;
-	localTime: number;
-}): number {
-	return getNumberChannelValueAtTime({
-		channel: getNumberChannelForPath({
-			animations,
-			propertyPath: "opacity",
-		}),
-		time: Math.max(0, localTime),
-		fallbackValue: baseOpacity,
-	});
-}
-
-export function resolveNumberAtTime({
-	baseValue,
-	animations,
-	propertyPath,
-	localTime,
-}: {
-	baseValue: number;
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPropertyPath;
-	localTime: number;
-}): number {
-	return getNumberChannelValueAtTime({
-		channel: getNumberChannelForPath({ animations, propertyPath }),
-		time: Math.max(0, localTime),
-		fallbackValue: baseValue,
-	});
-}
-
-export function resolveColorAtTime({
-	baseColor,
-	animations,
-	propertyPath,
-	localTime,
-}: {
-	baseColor: string;
-	animations: ElementAnimations | undefined;
-	propertyPath: AnimationPropertyPath;
-	localTime: number;
-}): string {
-	return getColorValueAtTime({
-		channel: getColorChannelForPath({ animations, propertyPath }),
-		time: Math.max(0, localTime),
-		fallbackValue: baseColor,
-	});
-}
+import type {
+	AnimationPropertyPath,
+	ElementAnimations,
+} from "@/lib/animation/types";
+import type { Transform } from "@/lib/rendering";
+import {
+	type AnimationComponentValue,
+	composeAnimationValue,
+	decomposeAnimationValue,
+} from "./binding-values";
+import {
+	getChannelValueAtTime,
+} from "./interpolation";
+
+export function getElementLocalTime({
+	timelineTime,
+	elementStartTime,
+	elementDuration,
+}: {
+	timelineTime: number;
+	elementStartTime: number;
+	elementDuration: number;
+}): number {
+	const localTime = timelineTime - elementStartTime;
+	if (localTime <= 0) {
+		return 0;
+	}
+
+	if (localTime >= elementDuration) {
+		return elementDuration;
+	}
+
+	return localTime;
+}
+
+export function resolveTransformAtTime({
+	baseTransform,
+	animations,
+	localTime,
+}: {
+	baseTransform: Transform;
+	animations: ElementAnimations | undefined;
+	localTime: number;
+}): Transform {
+	const safeLocalTime = Math.max(0, localTime);
+	return {
+		position: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.position",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.position,
+		}),
+		scaleX: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.scaleX",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.scaleX,
+		}),
+		scaleY: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.scaleY",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.scaleY,
+		}),
+		rotate: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.rotate",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.rotate,
+		}),
+	};
+}
+
+export function resolveOpacityAtTime({
+	baseOpacity,
+	animations,
+	localTime,
+}: {
+	baseOpacity: number;
+	animations: ElementAnimations | undefined;
+	localTime: number;
+}): number {
+	return resolveAnimationPathValueAtTime({
+		animations,
+		propertyPath: "opacity",
+		localTime: Math.max(0, localTime),
+		fallbackValue: baseOpacity,
+	});
+}
+
+export function resolveNumberAtTime({
+	baseValue,
+	animations,
+	propertyPath,
+	localTime,
+}: {
+	baseValue: number;
+	animations: ElementAnimations | undefined;
+	propertyPath: AnimationPropertyPath;
+	localTime: number;
+}): number {
+	return resolveAnimationPathValueAtTime({
+		animations,
+		propertyPath,
+		localTime: Math.max(0, localTime),
+		fallbackValue: baseValue,
+	});
+}
+
+export function resolveColorAtTime({
+	baseColor,
+	animations,
+	propertyPath,
+	localTime,
+}: {
+	baseColor: string;
+	animations: ElementAnimations | undefined;
+	propertyPath: AnimationPropertyPath;
+	localTime: number;
+}): string {
+	return resolveAnimationPathValueAtTime({
+		animations,
+		propertyPath,
+		localTime: Math.max(0, localTime),
+		fallbackValue: baseColor,
+	});
+}
+
+export function resolveAnimationPathValueAtTime<
+	T extends number | string | boolean | Transform["position"],
+>({
+	animations,
+	propertyPath,
+	localTime,
+	fallbackValue,
+}: {
+	animations: ElementAnimations | undefined;
+	propertyPath: string;
+	localTime: number;
+	fallbackValue: T;
+}): T {
+	const binding = animations?.bindings[propertyPath];
+	if (!binding) {
+		return fallbackValue;
+	}
+
+	const fallbackComponents = decomposeAnimationValue({
+		kind: binding.kind,
+		value: fallbackValue,
+	});
+	if (!fallbackComponents) {
+		return fallbackValue;
+	}
+
+	const componentValues = Object.fromEntries(
+		binding.components.map((component) => {
+			const channel = animations?.channels[component.channelId];
+			return [
+				component.key,
+				getChannelValueAtTime({
+					channel,
+					time: localTime,
+					fallbackValue:
+						fallbackComponents[component.key] ??
+						(channel?.kind === "discrete" ? false : 0),
+				}),
+			];
+		}),
+	) as Record<string, AnimationComponentValue | undefined>;
+	return (composeAnimationValue({
+		binding,
+		componentValues,
+	}) ?? fallbackValue) as T;
+}
-- 
cgit v1.3.1