Timeline Panel

The time-based heart of the editor: arrange layers in time, scrub and play back, and edit animation. One panel, three modes — Layers, Keys (dope sheet), and Graph — sharing a ruler, playhead, and work area.

The Timeline sits in the bottom-left of the editor. It has a fixed top toolbar (transport + mode switch), a left panel that changes with the mode (layer list / param list), and a scrollable tracks area on the right with a ruler across the top.

Modes

Three modes, switched by the segmented control in the toolbar or by pressing Tab (cycles Layers → Keys → Graph):

Mode	Label	Left panel	Tracks show
Layers	Layers	Layer list (eye / blend / matte)	Clip bars + keyframe diamonds
Dope Sheet	Keys	Param list	Keyframes as a grid of diamonds
Graph Editor	Graph	Param list + Node/Layer/Comp scope	Animation curves

The ruler, playhead, work area, and horizontal zoom are shared across all three.

Toolbar

Left to right:

• Composition settings (gear) — opens the comp dialog (also Cmd+K).
• Go to start — jump the playhead to frame 0.
• Play / Pause (Space) — real-time playback, or RAM-preview playback when RAM mode is on.
• RAM Preview toggle — switch between real-time and cached playback (see RAM preview).
• Time display toggle — switch the playhead readout between frames and timecode.
• Playhead field — the current frame/timecode; click to type an exact value and jump there.
• Work area toggle — set or clear the work area (preview range) to the full comp.
• Mode tabs — Layers / Keys / Graph (or Tab).
• Auto-key toggle (K) — when ON, editing an animated param auto-creates a keyframe; when OFF, edits are temporary and revert on playhead move.
• Clear cache — resets the caches and re-renders the current frame.
• Zoom out / in — also plain scroll wheel over the tracks (+ / - keys too). The zoom-out range adapts to the composition's duration, so even very long comps can be zoomed out to fit. Fit snaps the view to the whole comp duration in one click.
• Render — opens the export dialog.

In Layers mode an extra contextual group appears (duplicate selected layers, etc.).

Layer list (Layers mode)

The left panel lists the comp's layers, topmost first. The divider between it and the tracks is draggable to resize (240–500px). Each row has:

• Eye — enable/disable the layer (hidden layers don't render or composite).
• Motion blur — per-layer temporal-supersampling toggle (uses the comp's shutter settings).
• Blend mode — dropdown (Normal / Add / Multiply / Screen / Overlay) setting how the layer composites over the layers beneath it.
• Matte — dropdown to pick a track-matte source layer plus an Alpha / Luminance toggle. The matte source layer is excluded from normal compositing (standard track-matte behavior) and shows an M badge.
• Name — double-click to rename.

Selection

• Click — make the layer active (drives the node graph + Properties) and replace the selection.
• Cmd-click — toggle a layer in/out of the multi-selection.
• Shift-click — range-select from the active layer to the clicked one.
• Marquee — drag on empty track space to box-select.

One layer is active at a time — it's the layer the node graph and Properties panel follow. You can also have several layers selected at once for batch actions like sliding, duplicating, or deleting them together. Clicking a layer (in the list, on its track, or in the node-graph background) also selects its transform, so the on-canvas gizmo, Properties, and node graph all agree on what you're editing.

Tracks & clips (Layers mode)

Each layer is a clip bar spanning its start → end on the timeline.

• Drag the body — slide the clip in time. Sliding moves the layer's keyframes with it (so the animation travels with the clip).
• Drag an edge (trim) — change the in/out point. Trimming does not move keyframes — it reveals/hides source by adjusting the layer's source offset.
• Keyframe diamonds — animated params show their keyframes as diamonds along the clip.

Keyboard equivalents (timeline focused):

• [ / ] — slide the active (or selected) layers so the in / out point lands on the playhead, preserving duration; keyframes ride along.
• Alt+[ / Alt+] — trim the in / out point to the playhead (duration changes; keyframes stay).

Layers past the comp end

Layers may slide or trim beyond the comp's last frame (capped at 2× the comp duration so the scrollable width stays bounded). Frames past the comp end are dimmed and marked with a thin vertical line through the ruler and tracks. Layers out there are visible on the timeline but render nothing — the comp only renders its own frames, from frame 0 up to its duration. This is what lets [ put a full-length layer's in-point on a playhead deep inside the comp (its tail just spills past the end).

Ruler, playhead & work area

• Ruler — frame ticks and labels across the top; click or drag anywhere on it to scrub the playhead. The label density adapts to zoom.
• Playhead — a vertical line at the current frame. It stays within the comp, from frame 0 to the last frame.
• Page Up / Page Down — step the playhead back / forward one frame (global).
• Cache indicator — thin green bars under the ruler show which frames are cached (RAM preview / frame cache).
• Work area (preview range) — a lighter band on the ruler with drag handles (left/right to resize, middle to slide). The region outside it dims. Sets the range for RAM preview and looped playback. Keyboard:
  • B — set work-area start to the playhead.
  • N — set work-area end to the playhead.
  • The work area always stays clamped inside the comp.

Note: in Keys / Graph mode with keyframes selected, B sets the selected keyframes to Bezier (the H/L/S/B interpolation shortcuts). With no keyframes selected, B sets the work-area start.

Playback & RAM preview

• Real-time — plays at the comp frame rate, rendering on the fly at adaptive (usually Preview) quality. Skips frames to keep up.
• RAM preview — caches frames over the work area at the current viewer quality (Full when idle), then plays them back at native frame rate (4 GB budget). Numpad 0 triggers caching; Space toggles play/pause while keeping the cache. Editing the project resets the RAM preview.

Keys mode (Dope Sheet)

A compact grid of keyframe diamonds, one row per animated param, aligned with the param list on the left (collapsible layer headers).

• Select keyframes by clicking or marquee; a selection box around 2+ keys can be dragged to slide them or edge-handled to scale their timing.
• Interpolation of selected keys: H Hold · L Linear · S Smooth · B Bezier.
• Handle mode of selected keys: 1 Auto · 2 Clamped · 3 Free.
• Delete / Backspace removes selected keyframes.

Graph mode (Graph Editor)

An SVG curve view of animated parameters.

• Left panel scope — a Node / Layer / Comp selector chooses which params' curves are shown; a "Params" toggle narrows to the active param.
• Curves — every visible param is a colored curve; the active param's curve is slightly thicker. Colors default by component (X red, Y green, etc.); click the swatch next to a curve in the left panel to recolor it from the tag palette (or Default to restore the automatic color). Saved with the project.
• Keyframes — drag to move (frame + value); double-click empty space to add one; marquee to select.
• Tangent handles — selected Bezier keyframes show in/out handles you can drag. Handle modes: Auto (Catmull-Rom), Clamped (auto, Y-clamped), Free (manual). Bezier is symmetric — a segment eases if either endpoint is Bezier, and each endpoint contributes its own handle.
• Ease presets — a menu applies Identity / Ease In / Ease Out / S-curve to the selection.
• Vertical zoom — Alt+scroll zooms the value axis; the value-scale edges can be dragged.

Value / Speed

A Value / Speed toggle (top-left, matching the scope selector) switches the Y axis:

• Value — the parameter's value over time (the normal curve).
• Speed — how fast the parameter is changing (its velocity), drawn as a curve with a shaded "hill" beneath it. The Y-axis label and a clearly-filled toggle indicate which mode you're in.

In Speed mode, selected Bezier keyframes show velocity handles: drag vertically to set the speed at that keyframe, horizontally to set the influence (how far the ease reaches into the segment). These map straight back to the same Bezier tangents the Value graph edits, so the two views stay in lockstep. The speed=0 baseline floats just above the bottom edge so at-rest handles stay easy to grab. Keyframe markers in Speed mode are select-only — retiming and adding keyframes are Value-graph operations.

Reverse keyframes

The toolbar's reverse action mirrors the selected keyframes' timing around their own range (first ↔ last), reversing the motion.

Keyboard shortcuts

The timeline shortcuts (and all others) live in docs/keyboard-shortcuts.md. Quick reference:

Key	Action
Tab	Cycle Layers / Keys / Graph
Space	Play / pause
Page Up / Page Down	Step playhead back / forward one frame
[ / ]	Slide layer in / out point to playhead
Alt+[ / Alt+]	Trim layer in / out point to playhead
B / N	Set work-area start / end to playhead
K	Toggle auto-key
+ / -	Zoom in / out (or scroll wheel)
H / L / S / B	Keyframe interp (Hold/Linear/Smooth/Bezier) — Keys/Graph with keys selected
1 / 2 / 3	Handle mode (Auto/Clamped/Free)
Delete / Backspace	Delete selected keyframes (or active layer)