ef-filmstrip

<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">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">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">C</ef-text>
  </ef-timegroup>
</ef-timegroup>

<div class="fs-chrome">
  <ef-controls target="demo" class="fs-controls">
    <ef-toggle-play>
      <button slot="play" class="fs-btn">▶</button>
      <button slot="pause" class="fs-btn">⏸</button>
    </ef-toggle-play>
    <ef-scrubber class="fs-scrubber"></ef-scrubber>
    <ef-time-display style="font-variant-numeric:tabular-nums;font-size:12px;opacity:0.6;padding-right:8px"></ef-time-display>
  </ef-controls>

  <div class="fs-filmstrip-row">
    <ef-filmstrip
      target="demo"
      class="fs-strip"
      pixels-per-ms="0.04"
      hide-playhead="false"
    ></ef-filmstrip>
  </div>
</div>

<style>
  .fs-chrome { border-top: 1px solid rgba(255,255,255,0.08); }
  .fs-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .fs-filmstrip-row { padding: 8px 0; }
  .fs-strip { display: block; width: 100%; height: 52px; }
  .fs-btn { cursor: pointer; padding: 4px 10px; font-size: 13px; }
  .fs-scrubber { flex: 1; }
</style>