ef-filmstrip

Visual timeline that displays the temporal structure of a composition. Shows tracks for each element in the hierarchy with playback visualization.

Basic Usage

Display a timeline for a composition.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="filmstrip-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
  <ef-text class="absolute bottom-4 left-4 text-white text-3xl font-bold">
    Hello Timeline
  </ef-text>
</ef-timegroup>
<div class="mt-4 h-[200px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-filmstrip target="filmstrip-demo"></ef-filmstrip>
</div>
<div class="mt-2 flex gap-2">
  <ef-controls target="filmstrip-demo">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  </ef-controls>
</div>

Zoomed Timeline

Adjust zoom level with pixels-per-ms.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="zoom-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="5s" class="size-full object-contain"></ef-video>
  <ef-text class="absolute top-4 left-4 text-white text-2xl font-bold">Zoomed View</ef-text>
</ef-timegroup>
<div class="mt-4 h-[200px] bg-gray-900 rounded-lg overflow-auto">
  <ef-filmstrip target="zoom-demo" pixels-per-ms="0.2"></ef-filmstrip>
</div>
<div class="mt-2 flex gap-2">
  <ef-controls target="zoom-demo">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  </ef-controls>
</div>

Sequence Timeline

Filmstrip automatically shows sequential layout for mode="sequence" timegroups.

<ef-timegroup mode="sequence" class="w-[720px] h-[480px] bg-black" id="sequence-demo">
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="0s" sourceout="2s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-4xl font-bold bg-blue-600 p-4 rounded relative">Scene 1</h1>
  </ef-timegroup>
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="5s" sourceout="7s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-4xl font-bold bg-purple-600 p-4 rounded relative">Scene 2</h1>
  </ef-timegroup>
  <ef-timegroup class="flex items-center justify-center">
    <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" sourcein="8s" class="absolute inset-0 size-full object-contain"></ef-video>
    <h1 class="text-white text-4xl font-bold bg-green-600 p-4 rounded relative">Scene 3</h1>
  </ef-timegroup>
</ef-timegroup>
<div class="mt-4 h-[250px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-filmstrip target="sequence-demo" pixels-per-ms="0.08"></ef-filmstrip>
</div>
<div class="mt-2 flex gap-2">
  <ef-controls target="sequence-demo">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  </ef-controls>
</div>

Filtering Tracks

Control which elements appear in the timeline.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="filter-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
  <ef-text class="absolute top-4 left-4 text-white text-2xl">Title Text</ef-text>
  <ef-text class="absolute bottom-4 left-4 text-white text-sm helper-text">Helper text</ef-text>
  <ef-text class="absolute bottom-4 right-4 text-white text-sm watermark">Watermark</ef-text>
</ef-timegroup>
<div class="mt-4 space-y-2">
  <div class="text-white text-sm">Hiding helper text and watermark:</div>
  <div class="h-[200px] bg-gray-900 rounded-lg overflow-hidden">
    <ef-filmstrip target="filter-demo" hide=".helper-text, .watermark"></ef-filmstrip>
  </div>
</div>
<div class="mt-2 flex gap-2">
  <ef-controls target="filter-demo">
    <ef-toggle-play class="px-3 py-1 bg-blue-600 text-white rounded"></ef-toggle-play>
  </ef-controls>
</div>

Without Playhead

Hide the playhead indicator for static timeline views.

<ef-timegroup mode="contain" class="w-[720px] h-[480px] bg-black" id="static-demo">
  <ef-video src="https://assets.editframe.com/bars-n-tone.mp4" class="size-full object-contain"></ef-video>
  <ef-text class="absolute bottom-4 left-4 text-white text-3xl font-bold">Static View</ef-text>
</ef-timegroup>
<div class="mt-4 h-[150px] bg-gray-900 rounded-lg overflow-hidden">
  <ef-filmstrip target="static-demo" hide-playhead></ef-filmstrip>
</div>

Features

Automatic track generation — Creates visual tracks for all temporal elements in the composition hierarchy.

Playhead visualization — Shows current playback position with a vertical line that follows playback.

Zoom control — Adjust timeline zoom with pixels-per-ms to show more or less detail.

Track filtering — Show or hide specific elements using CSS selectors.

Sequence support — Automatically handles sequential timegroup layouts.

Scroll support — Long timelines are scrollable with the playhead staying visible.

Relationship to EFTimeline

ef-filmstrip is a simplified wrapper around ef-timeline that shows only the tracks without:

• Hierarchy panel
• Playback controls
• Zoom controls
• Timeline ruler
• Time display

For full timeline editing features, use ef-timeline directly.

CSS Custom Properties

Timeline appearance inherits from theme variables:

ef-filmstrip {
  --ef-color-bg: #111827;
  --ef-color-border: #374151;
  --ef-color-playhead: #3b82f6;
  --ef-track-height: 24px;
}