From 1276a10e9a574b8da74bbf44de6d783c290afaa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 1 Mar 2026 12:46:00 +0100
Subject: [PATCH] fix: keyframe timeline

---
 components/animate/AnimationEditor.tsx  | 11 ++++++-----
 components/animate/KeyframeTimeline.tsx |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/animate/AnimationEditor.tsx b/components/animate/AnimationEditor.tsx
index 69c4cb6..d8685cd 100644
--- a/components/animate/AnimationEditor.tsx
+++ b/components/animate/AnimationEditor.tsx
@@ -21,7 +21,7 @@ export function AnimationEditor() {
   );
   const [previewElement, setPreviewElement] = useState<PreviewElement>('box');
   const [mobileTab, setMobileTab] = useState<MobileTab>('edit');
-  const [rightTab, setRightTab] = useState<RightTab>('keyframes');
+  const [rightTab, setRightTab] = useState<RightTab>('export');
 
   const selectedKeyframe = config.keyframes.find((k) => k.id === selectedId) ?? null;
 
@@ -108,6 +108,8 @@ export function AnimationEditor() {
 
               <div className="border-t border-border/25" />
 
+              <KeyframeTimeline {...timelineProps} embedded />
+
               <KeyframeProperties keyframe={selectedKeyframe} onChange={updateKeyframeProps} />
             </div>
           </div>
@@ -123,7 +125,7 @@ export function AnimationEditor() {
           <div className="glass rounded-xl p-4 flex flex-col flex-1 min-h-0 overflow-hidden">
             {/* Tab switcher */}
             <div className="flex glass rounded-lg p-0.5 gap-0.5 mb-4 shrink-0">
-              {(['keyframes', 'export', 'presets'] as RightTab[]).map((t) => (
+              {(['export', 'presets'] as RightTab[]).map((t) => (
                 <button
                   key={t}
                   onClick={() => setRightTab(t)}
@@ -134,14 +136,13 @@ export function AnimationEditor() {
                       : 'text-muted-foreground hover:text-foreground'
                   )}
                 >
-                  {t === 'keyframes' ? 'Keyframes' : t === 'export' ? 'Export' : 'Presets'}
+                  {t === 'export' ? 'Export' : 'Presets'}
                 </button>
               ))}
             </div>
             {/* Content */}
             <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent pr-0.5">
-              {rightTab === 'keyframes' && <KeyframeTimeline {...timelineProps} embedded />}
-              {rightTab === 'export' && <ExportPanel config={config} />}
+              {rightTab === 'export' && <ExportPanel config={config}/>}
               {rightTab === 'presets' && <PresetLibrary onSelect={loadPreset} />}
             </div>
           </div>
diff --git a/components/animate/KeyframeTimeline.tsx b/components/animate/KeyframeTimeline.tsx
index d38840f..cfe0580 100644
--- a/components/animate/KeyframeTimeline.tsx
+++ b/components/animate/KeyframeTimeline.tsx
@@ -15,7 +15,7 @@ interface Props {
   embedded?: boolean; // when true, no glass card wrapper (use inside another card)
 }
 
-const TICKS = [0, 25, 50, 75, 100];
+const TICKS = [25, 50, 75];
 
 const iconBtn = (disabled?: boolean) =>
   cn(
@@ -85,14 +85,14 @@ export function KeyframeTimeline({ keyframes, selectedId, onSelect, onAdd, onDel
       {/* Track */}
       <div
         ref={trackRef}
-        className="relative h-14 bg-white/3 rounded-lg border border-border/25 cursor-crosshair select-none"
+        className="relative h-14 bg-white/3 rounded-lg border border-border/25 cursor-crosshair select-none mx-4"
         onClick={handleTrackClick}
       >
         <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-border/30" />
         {TICKS.map((tick) => (
           <div
             key={tick}
-            className="absolute top-0 bottom-0 flex flex-col items-center pointer-events-none"
+            className="absolute top-0 bottom-0 flex flex-col items-center pointer-events-none -ml-1.5"
             style={{ left: `${tick}%` }}
           >
             <div className="w-px h-2 bg-muted-foreground/20" />
@@ -118,7 +118,7 @@ export function KeyframeTimeline({ keyframes, selectedId, onSelect, onAdd, onDel
       </div>
 
       {/* Offset labels */}
-      <div className="relative h-4">
+      <div className="relative h-4 mx-4">
         {sorted.map((kf) => (
           <span
             key={kf.id}