ef-timeline-ruler

Standalone time ruler. Shows adaptive time markers at the current zoom level.

A canvas-based time ruler that draws adaptive tick marks and time labels. At low zoom it shows second markers; at high zoom it shows individual frames. Typically used inside ef-timeline, but available standalone for custom timeline layouts.

ef-timeline-ruler consumes timelineStateContext (for pixelsPerMs, scroll position, and viewport width) and durationContext. When used outside an ef-timeline, you must provide these values directly via attributes.

<ef-timegroup id="demo" mode="fixed" duration="5s" class="w-[1920px] h-[1080px] bg-slate-900 flex items-center justify-center">
  <style>
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    .demo-text { animation: pulse 2.4s ease-in-out infinite; display: inline-block; }
  </style>
  <ef-text class="demo-text text-white text-7xl font-bold">Hello</ef-text>
</ef-timegroup>

<ef-timeline target="demo" class="ruler-timeline"></ef-timeline>

<style>
  .ruler-timeline {
    display: block;
    width: 100%;
    height: 120px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
</style>