Editor

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.

Interactive example

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

Attributes

Filter attributes5 of 5

`duration`

React prop: duration
Type: number
Default: —
Description: Total duration in seconds.

`duration-ms`

React prop: durationMs
Type: number
Default: —
Description: Total duration in milliseconds, used when not provided via duration (Motion Designer timelines).

`fps`

React prop: fps
Type: number
Default: 30
Description: Frame rate — determines when individual frame tick marks become visible.

`pixels-per-second`

React prop: pixelsPerSecond
Type: number
Default: 100
Description: Zoom level — pixels rendered per second of composition time.

`zoom-scale`

React prop: zoomScale
Type: number
Default: —
Description: Zoom multiplier used to derive effectivePixelsPerSecond when duration-ms is set.

CSS Parts

CSS parts
Part	Description
`canvas`	This part is the tick-mark canvas.
`container`	This part is the outer ruler wrapper.