TimelinePlayhead

TimelinePlayhead renders a vertical line and handle at the current playback frame position, spanning the full height of the timeline.

Live Example

Usage

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

function App() {
  return (
    <TimelineProvider engine={engine}>
      <div style={{ position: 'relative', height: 200 }}>
        <TimelinePlayhead totalHeight={200} />
      </div>
    </TimelineProvider>
  );
}

Props

Context Requirement

TimelinePlayhead must be inside a TimelineProvider. It reads ppf, the current playhead frame, and playing state from the engine context to position itself and animate.