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.

Attribute	React prop	Type	Default	Description
`duration`	`duration`	`number`	—	Total duration in seconds.
`duration-ms`	`durationMs`	`number`	—	Total duration in milliseconds, used when not provided via `duration` (Motion Designer timelines).
`fps`	`fps`	`number`	`30`	Frame rate — determines when individual frame tick marks become visible.
`pixels-per-second`	`pixelsPerSecond`	`number`	`100`	Zoom level — pixels rendered per second of composition time.
`zoom-scale`	`zoomScale`	`number`	—	Zoom multiplier used to derive {@link effectivePixelsPerSecond} when `duration-ms` is set.

<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>

CSS Parts

Part	Description
`canvas`	The tick-mark canvas.
`container`	Outer ruler wrapper.