TimelineRuler
High-performance canvas time ruler with M:SS timestamps, half-second cadence dots, and geometric playhead
@timelinx/ui provides two time ruler components:
TimelineRulerV3(Modern CapCut-style): Clean, high-readability canvas ruler rendering timestamps directly as0:00,0:01,0:02, etc., with subtle half-second cadence dots and a geometric flat-topped playhead (RulerPlayheadV3). Supports click-to-seek, scrubbing, and in/out point range highlights.TimelineRulerV2(Classic NLE): Traditional frame and timecode tick marks rendered on canvas with triangular playhead indicator.
Live Example
Loading...
V3 Usage
import { TimelineRulerV3 } from '@timelinx/ui';
<TimelineRulerV3
fps={30}
ppf={ppf}
duration={duration}
currentTime={currentFrame}
scrollLeft={scrollLeft}
onSeek={(frame) => engine.seekTo(frame)}
inPoint={inPoint}
outPoint={outPoint}
/>;V3 Props
| Prop | Type | Default | Description |
|---|---|---|---|
fps | FrameRate | required | Timeline frame rate |
ppf | number | required | Pixels per frame |
duration | number | required | Timeline duration in frames |
currentTime | number | required | Current playhead position in frames |
onSeek | (frame: number) => void | required | Callback when seeking via click or scrub |
scrollLeft | number | 0 | Current horizontal scroll offset |
height | number | 26 | Ruler track height in pixels |
minVisibleSeconds | number | 7 | Minimum seconds visible even if timeline is empty/short |
inPoint | number | null | — | In-point frame for range highlight |
outPoint | number | null | — | Out-point frame for range highlight |