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.

<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