ef-timeline

Full timeline editor with tracks, playhead, ruler, and zoom.

Renders a multi-track timeline for the target composition. Includes a time ruler, per-element track rows, a draggable playhead, and built-in playback and zoom controls. Zoom state is persisted to localStorage keyed by the root timegroup ID.

Attribute	React prop	Type	Default	Description
`follow-playhead`	`followPlayhead`	`boolean`	`true`	Auto-scrolls the timeline to keep the playhead visible during active playback.
`hierarchy-width`	`labelWidth`	`number`	`160`	Width of the layer hierarchy panel in pixels.
`pixels-per-second`	`pixelsPerSecond`	`number`	`100`	Zoom level — pixels rendered per second of composition time.
`row-height`	`rowHeight`	`number`	`28`	Height of each track row in pixels.
`target`	`target`	`string`	`""`	ID of the target element this component controls or reads from.

<ef-timegroup id="demo" mode="sequence" class="w-[1920px] h-[1080px] bg-slate-900">
  <ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-indigo-900 flex items-center justify-center">
    <ef-text class="text-white text-7xl font-bold">Scene A</ef-text>
  </ef-timegroup>
  <ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-rose-900 flex items-center justify-center">
    <ef-text class="text-white text-7xl font-bold">Scene B</ef-text>
  </ef-timegroup>
  <ef-timegroup mode="fixed" duration="2s" class="absolute w-full h-full bg-emerald-900 flex items-center justify-center">
    <ef-text class="text-white text-7xl font-bold">Scene C</ef-text>
  </ef-timegroup>
</ef-timegroup>

Use show-* attributes to control which panels are visible:

<!-- Timeline with all panels -->
<ef-timeline target="my-canvas" show-ruler show-hierarchy show-playback-controls show-zoom-controls></ef-timeline>

<!-- Ruler and playhead only -->
<ef-timeline target="my-canvas" show-ruler show-playhead></ef-timeline>

Keyboard shortcuts (when focused):

Key	Action
`←` / `→`	Step one frame
`Shift+←` / `Shift+→`	Step one second
`Scroll`	Pan timeline
`Cmd/Ctrl+Scroll`	Zoom toward cursor

CSS Parts

Part	Description
`scrub-overlay`	Full-area overlay capturing pointer drags while scrubbing.

ef-timeline does not itself expose a track part — the per-row clip lives on the nested ef-timeline-row element it renders internally:

Part	Description
`bar`	The colored clip bar itself.
`label`	Row label area (element name, icon, detail text).
`track`	Row track area displaying the clip bar.

ef-timeline::part(playhead)  { background: #e94560; }
ef-timeline-row::part(track) { background: #1a1a2e; border-radius: 4px; }

CSS Custom Properties

Each row is rendered by an internal ef-timeline-row:

Property	Default	Description
`--trim-handle-width`	—	Overrides the nested `<ef-trim-handles>`'s own `--trim-handle-width` for clips rendered inside this row.