we're getting there

apps/web/src/components/editor/timeline/index.tsx

@@ -79,6 +79,7 @@ export function Timeline() {
 
   const {
     dragState,
+    dragDropTarget,
     handleElementMouseDown,
     handleElementClick,
     lastMouseXRef,
@@ -312,6 +313,11 @@ export function Timeline() {
               tracks={timeline.getTracks()}
               isVisible={isDragOver}
             />
+            <DragLine
+              dropTarget={dragDropTarget}
+              tracks={timeline.getTracks()}
+              isVisible={dragState.isDragging}
+            />
 
             <ScrollArea className="h-full w-full" ref={tracksScrollRef}>
               <div

apps/web/src/components/editor/timeline/timeline-element.tsx

@@ -96,6 +96,10 @@ export function TimelineElement({
   );
 
   const isBeingDragged = dragState.elementId === element.id;
+  const dragOffsetY =
+    isBeingDragged && dragState.isDragging
+      ? dragState.currentMouseY - dragState.startMouseY
+      : 0;
   const elementStartTime =
     isBeingDragged && dragState.isDragging
       ? dragState.currentTime
@@ -130,9 +134,16 @@ export function TimelineElement({
     <ContextMenu>
       <ContextMenuTrigger asChild>
         <div
-          className={`timeline-element absolute top-0 h-full select-none ${isBeingDragged ? "z-30" : "z-10"
+          className={`absolute top-0 h-full select-none ${isBeingDragged ? "z-30" : "z-10"
             }`}
-          style={{ left: `${elementLeft}px`, width: `${elementWidth}px` }}
+          style={{
+            left: `${elementLeft}px`,
+            width: `${elementWidth}px`,
+            transform:
+              isBeingDragged && dragState.isDragging
+                ? `translate3d(0, ${dragOffsetY}px, 0)`
+                : undefined,
+          }}
           data-element-id={element.id}
           data-track-id={track.id}
         >

apps/web/src/components/editor/timeline/timeline-track.tsx

@@ -53,10 +53,10 @@ export function TimelineTrackContent({
 
   return (
     <div
-      className="hover:bg-muted/20 size-full"
+      className="size-full"
       onClick={clearElementSelection}
     >
-      <div className="track-elements-container relative h-full min-w-full">
+      <div className="relative h-full min-w-full">
         {track.elements.length === 0 ? (
           <div className="text-muted-foreground border-muted/30 flex size-full items-center justify-center rounded-sm border-2 border-dashed text-xs" />
         ) : (