Minikit — Docs

Timeline

Animation timeline with keyframes, shots, and playback.

/timeline

When to use

Animation and motion tools — scrub time, place keyframes, manage shots, and control playback.

Demo

00:00.00 / 00:04.004s

0s1s2s3s4s

Usage

example.tsx

<Timeline
  duration={4}
  currentTime={time}
  onCurrentTimeChange={setTime}
  keyframes={keyframes}
  onKeyframesChange={setKeyframes}
  playing={playing}
  onPlayingChange={setPlaying}
  onAddKeyframe={() => addKfAt(time)}
/>

Props

Prop	Type	Default	Description
duration	number	4	Total timeline length in seconds.
currentTime	number	—	Playhead position (controlled).
onCurrentTimeChange	(time: number) => void	—	Called when playhead moves.
keyframes	TimelineKeyframe[]	—	Keyframe markers on the track.
onKeyframesChange	(keyframes) => void	—	Called when keyframes are dragged.
shots	TimelineShot[]	—	Shot tabs in the control bar.
playing	boolean	—	Playback state.
onPlayingChange	(playing: boolean) => void	—	Play/pause handler.
looping	boolean	—	Loop playback.
onAddKeyframe	() => void	—	Add keyframe at current time.
showControls	boolean	true	Show top control bar.
className	string	—	Optional CSS class.

Source

timeline.tsx

Dependencies

Also copy lib/utils.ts (cn helper):

lib/utils.ts

Loading…