Timeline

Guidelines

• duration and every item's start and length are in seconds. The ruler steps itself (1, 5 or 30 s) unless step is set; rate names the frame rate shown at the ruler's head ("24 fps").
• Tracks have a kind: video (a picture strip), board (storyboard panels standing in for video), overlay (text and images), audio (waveform), caption (one language per track), effect.
• Item state: selected, gap (planned time with no picture yet; never hide it), board, rejected.
• A selected item shows a grip at each end: drag one to trim the item, so its time shrinks or grows from that end, a frame at a time and never over the item beside it; onTrim gets each new time. While trimming, pass trimmed ({ start, end } in seconds) to draw the cut-off footage as a dashed ghost beyond the item.
• markers name points in time (a scene start, a beat). They have their own rail above the times: each is a flag that starts at its time, with a hairline from it down through the times to the tracks. A flag that would run past the end ends at its time instead, and one that would run into the next is cut short a gap before it, its full name in its title. No marker covers a time. playhead draws the current time across every track.
• Track names stay on one line in the 120 px head; a longer one is cut short, with its full name in its title.
• A gap has a dashed edge. With no label, it says what it is: "No picture yet", or "Storyboard" for a board item.
• It never snaps item boundaries on its own: start and length are the author's. While you drag, an edge snaps to another item or the playhead and a line shows where.
• reorderable gives every track head a drag handle: the order of titles and images decides what draws in front (the picture is always at the back). Drag a handle and its track lifts, a line shows where it lands, and onMoveTrack(from, to) is called when it is let go; the move is said then, not at each place it passes. moving ({ track, to }, indexes) draws a track lifted, for a board.
• offset (seconds) labels the ruler in program time when the timeline shows a zoomed window of a longer cut.
• Track kinds dialogue, music and audio (sound) draw the core Waveform at the item's width, in their own wave tokens; pass an item's peaks for its real loudness. Tracks are told apart by their heads (icon and name), not by colour; the accent marks only the selection and the playhead.

• onSelect(track, item) makes the items one Tab stop of buttons: Left and Right move within a track, Up and Down to the nearest item on the track above or below, Enter or Space selects.
• A selected item's grips sit beside it in the lane and are sliders: an arrow trims by trimStep (a frame, 1/24 s, by default), Shift, Page Up or Page Down by a second, and each move calls onTrim(track, item, edge, seconds). An edge stops at the item beside it on its track, never over it; Home and End take it that far. Without onTrim the grips only draw.
• onMoveTrack(from, to): with reorderable, Up and Down on a track's handle move the track, focus stays on its handle, and the move is said ("Captions track moved to 2 of 5"). Enter or Space lifts the track instead: the arrows move where it lands, Enter or Space drops it there, and Escape puts it back.