From 49426f19cd8eaed7cf6c47999b66fee7ee637a56 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 27 Feb 2026 16:33:57 +0100
Subject: feat: implement keyframe animation system

Add keyframe support for transform, opacity, and volume properties.
Includes animation engine (interpolation, mutations, resolvers), timeline
markers with selection/snapping, properties panel toggles, keyframe-aware
renderer, and full undo/redo command support.

Also refactor element command constructors to object params, extract
timeline pixel math to pixel-utils.ts, and update cursor rules.
---
 apps/web/src/components/editor/panels/timeline/snap-indicator.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'apps/web/src/components/editor/panels/timeline/snap-indicator.tsx')

diff --git a/apps/web/src/components/editor/panels/timeline/snap-indicator.tsx b/apps/web/src/components/editor/panels/timeline/snap-indicator.tsx
index 54ce5237..927d336a 100644
--- a/apps/web/src/components/editor/panels/timeline/snap-indicator.tsx
+++ b/apps/web/src/components/editor/panels/timeline/snap-indicator.tsx
@@ -2,6 +2,10 @@
 
 import { useSnapIndicatorPosition } from "@/hooks/timeline/use-snap-indicator-position";
 import type { SnapPoint } from "@/lib/timeline/snap-utils";
+import {
+	getCenteredLineLeft,
+	TIMELINE_INDICATOR_LINE_WIDTH_PX,
+} from "@/lib/timeline";
 import type { TimelineTrack } from "@/types/timeline";
 
 interface SnapIndicatorProps {
@@ -40,10 +44,10 @@ export function SnapIndicator({
 		<div
 			className="pointer-events-none absolute"
 			style={{
-				left: `${leftPosition}px`,
+				left: `${getCenteredLineLeft({ centerPixel: leftPosition })}px`,
 				top: topPosition,
 				height: `${height}px`,
-				width: "2px",
+				width: `${TIMELINE_INDICATOR_LINE_WIDTH_PX}px`,
 			}}
 		>
 			<div className={"bg-primary/40 h-full w-0.5 opacity-80"} />
-- 
cgit v1.3.1