Understanding the WannaCut Timeline

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ter-9001/WannaCut/llms.txt

Use this file to discover all available pages before exploring further.

​

Layout Overview

• Track controls aside (left) — A fixed-width panel on the left of each track row showing the track type icon, track ID, and action buttons (Lock, Mute, reorder arrows).
• Scrollable clip area (right) — The main canvas where clips sit. It scrolls horizontally as your sequence grows longer. The minimum width is set to 10,000 pixels so there is always room to extend your edit.
• Ruler (top) — A horizontal strip above the clip area showing timecode markers. Tick marks appear every 5 seconds, with full HH:MM:SS labels every 30 seconds. Clicking anywhere on the ruler immediately seeks the playhead to that position.
• Playhead — A bright blue (bg-sky-600) vertical line that spans from the ruler down through all tracks. It shows the current playback position. A small rounded head sits at the top of the line and serves as a drag handle.
• Resizable height — Drag the thin resize handle at the very top edge of the timeline footer to make the entire timeline panel taller or shorter. The minimum height is 150 px; the maximum is 80% of the window height.

​

Playhead & Timecode

• Click on the ruler — Instantly seeks to the clicked position. WannaCut calls seekTo(), which updates currentTimeRef, moves the playhead DOM element via translateX, and triggers a canvas redraw if playback is paused.
• Drag the playhead head — Hold down on the rounded blue circle at the top of the playhead and drag left or right for frame-accurate scrubbing.
• Click anywhere on a track row — Also seeks the playhead to the clicked horizontal position.

const formatTime = (seconds: number) => {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = Math.floor(seconds % 60);
  const ms = Math.floor((seconds % 1) * 100);
  // Returns HH:MM:SS.ms or MM:SS.ms
};

​

Zoom

​

Magnetic Snapping

• Toggle: Press Ctrl + T or click the Snap button in the timeline toolbar. A pulsing LayoutGrid icon indicates snap is active.
• Behavior: When enabled, the getSnappedTime() function checks only the immediate left and right neighbors on the same track. The clip snaps to the end edge of the clip on its left, or the start edge of the clip on its right — whichever is closer. This context-aware approach prevents a clip from jumping over other clips to reach a distant edge.

// Snap only considers the immediate neighbors on the same track
const leftNeighbor  = [...trackClips].reverse().find(c => c.start <= currentTime);
const rightNeighbor = trackClips.find(c => c.start > currentTime);

​

Box Selection

​

Track Controls

​

Keyboard Navigation