Clip timelinePro

The edit: tracks of clips with thumbnails or waveforms, trim handles, drag to move across tracks, snapping to edges, markers and the playhead, and a ruler that scrubs on whole frames.

Markdown

On this page

ProA four shot edit with an overlay and a score. Drag clips, trim their edges, scrub the ruler; edges snap to each other, the playhead and the beat marker.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/clip-timeline

Usage

tsx

import { ClipTimeline } from "@/components/ui/chatcn/pro/clip-timeline"

<ClipTimeline tracks={tracks} clips={clips} onClipsChange={setClips} time={time} onTimeChange={setTime} />

Clips are { id, track, start, in, out, sourceDuration, label } plus a source, thumbnails or audio peaks. Moves never overlap: a clip lands in the nearest gap it fits. Trims stop at the source and the neighbors. Hold Shift while dragging to skip snapping. clipAt from the lib tells a preview what to show at the playhead.

Examples

States

ProEmpty, a shot rendering and one failed, long names with a locked track, zoomed to single frames and disabled.

Props

Prop	Type	Notes
`tracks`	`TimelineTrack[]`	`kind` video or audio, `locked`
`clips`, `defaultClips`, `onClipsChange`	`TimelineClip[]`
`time`, `playing`		Playhead and playback, controlled or not
`selected`, `snap`, `zoom`		Each controlled or not
`markers`, `minLength`, `fps`
`onClipOpen`, `createId`, `labels`, `disabled`

Keyboard

Key	Action
Arrows on a clip	Move a frame, `Shift` for a second
`Alt` + arrows	Trim the tail; with `Shift`, the head
`[` `]`	Trim head or tail to the playhead
Up, Down	Move to the next track of its kind
`Delete`, `Enter`	Delete, open
`Cmd` + `B`, `N`, `+` `-`	Split, snap, zoom

Accessibility

Each clip is a button that names its span, length, track and state.
Moves, trims, splits and deletes are announced politely.

Motion

Editing is direct manipulation with no easing; only the trim handles fade in (150 ms).