TimelineRuler

TimelineRuler renders a time ruler with major and minor tick marks, showing frame numbers or timecode labels depending on the current zoom level.

Live Example

Usage

import { TimelineRuler, TimelineProvider } from '@timelinx/ui';

function App() {
  return (
    <TimelineProvider engine={engine}>
      <div style={{ overflowX: 'auto', height: 48 }}>
        <TimelineRuler totalWidth={2400} />
      </div>
    </TimelineProvider>
  );
}

Props

Context Requirement

TimelineRuler must be inside a TimelineProvider. It reads ppf (pixels per frame), scroll position, viewport width, and timeline metadata from the engine context to render the correct tick marks and labels.