From a526066b61f18b082adf6faeaf3e19f3d13cd77d Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 2 Mar 2026 16:36:10 +0100
Subject: feat: wire ui to have keyframes for: opacity, text color, and all
 background properties

---
 apps/web/src/lib/animation/index.ts             |  1 +
 apps/web/src/lib/animation/property-registry.ts | 88 +++++++++++++++++++++++++
 apps/web/src/lib/animation/resolve.ts           | 18 +++++
 3 files changed, 107 insertions(+)

(limited to 'apps/web/src/lib/animation')

diff --git a/apps/web/src/lib/animation/index.ts b/apps/web/src/lib/animation/index.ts
index f6a0b974..c4396bb7 100644
--- a/apps/web/src/lib/animation/index.ts
+++ b/apps/web/src/lib/animation/index.ts
@@ -18,6 +18,7 @@ export {
 export {
 	getElementLocalTime,
 	resolveColorAtTime,
+	resolveNumberAtTime,
 	resolveOpacityAtTime,
 	resolveTransformAtTime,
 	resolveVolumeAtTime,
diff --git a/apps/web/src/lib/animation/property-registry.ts b/apps/web/src/lib/animation/property-registry.ts
index 69757d49..361ae3ba 100644
--- a/apps/web/src/lib/animation/property-registry.ts
+++ b/apps/web/src/lib/animation/property-registry.ts
@@ -7,6 +7,11 @@ import type {
 } from "@/types/animation";
 import type { TimelineElement } from "@/types/timeline";
 import { MIN_TRANSFORM_SCALE } from "@/constants/animation-constants";
+import {
+	CORNER_RADIUS_MAX,
+	CORNER_RADIUS_MIN,
+	DEFAULT_TEXT_BACKGROUND,
+} from "@/constants/text-constants";
 import { isVisualElement } from "@/lib/timeline/element-utils";
 
 interface NumericRange {
@@ -144,6 +149,89 @@ const ANIMATION_PROPERTY_REGISTRY: Record<
 					}
 				: element,
 	},
+	"background.paddingX": {
+		valueKind: "number",
+		defaultInterpolation: "linear",
+		numericRange: { min: 0 },
+		supportsElement: ({ element }) => element.type === "text",
+		getValue: ({ element }) =>
+			element.type === "text"
+				? (element.background.paddingX ?? DEFAULT_TEXT_BACKGROUND.paddingX)
+				: null,
+		setValue: ({ element, value }) =>
+			element.type === "text"
+				? {
+						...element,
+						background: { ...element.background, paddingX: value as number },
+					}
+				: element,
+	},
+	"background.paddingY": {
+		valueKind: "number",
+		defaultInterpolation: "linear",
+		numericRange: { min: 0 },
+		supportsElement: ({ element }) => element.type === "text",
+		getValue: ({ element }) =>
+			element.type === "text"
+				? (element.background.paddingY ?? DEFAULT_TEXT_BACKGROUND.paddingY)
+				: null,
+		setValue: ({ element, value }) =>
+			element.type === "text"
+				? {
+						...element,
+						background: { ...element.background, paddingY: value as number },
+					}
+				: element,
+	},
+	"background.offsetX": {
+		valueKind: "number",
+		defaultInterpolation: "linear",
+		supportsElement: ({ element }) => element.type === "text",
+		getValue: ({ element }) =>
+			element.type === "text"
+				? (element.background.offsetX ?? DEFAULT_TEXT_BACKGROUND.offsetX)
+				: null,
+		setValue: ({ element, value }) =>
+			element.type === "text"
+				? {
+						...element,
+						background: { ...element.background, offsetX: value as number },
+					}
+				: element,
+	},
+	"background.offsetY": {
+		valueKind: "number",
+		defaultInterpolation: "linear",
+		supportsElement: ({ element }) => element.type === "text",
+		getValue: ({ element }) =>
+			element.type === "text"
+				? (element.background.offsetY ?? DEFAULT_TEXT_BACKGROUND.offsetY)
+				: null,
+		setValue: ({ element, value }) =>
+			element.type === "text"
+				? {
+						...element,
+						background: { ...element.background, offsetY: value as number },
+					}
+				: element,
+	},
+	"background.cornerRadius": {
+		valueKind: "number",
+		defaultInterpolation: "linear",
+		numericRange: { min: CORNER_RADIUS_MIN, max: CORNER_RADIUS_MAX },
+		supportsElement: ({ element }) => element.type === "text",
+		getValue: ({ element }) =>
+			element.type === "text"
+				? (element.background.cornerRadius ?? CORNER_RADIUS_MIN)
+				: null,
+		setValue: ({ element, value }) =>
+			element.type === "text"
+				? {
+						...element,
+						background: { ...element.background, cornerRadius: value as number },
+					}
+				: element,
+	},
 };
 
 export function isAnimationPropertyPath({
diff --git a/apps/web/src/lib/animation/resolve.ts b/apps/web/src/lib/animation/resolve.ts
index 450ae983..147be1b3 100644
--- a/apps/web/src/lib/animation/resolve.ts
+++ b/apps/web/src/lib/animation/resolve.ts
@@ -92,6 +92,24 @@ export function resolveOpacityAtTime({
 	});
 }
 
+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,
-- 
cgit v1.3.1