Shot sequencerPro
Sequence shots with cuts, crossfades, dips to black or wipes, preview the real transitions, and export the edit as one file.
On this page
ProFive shots joined by a crossfade, a cut, a dip to black and a wipe. The preview plays the real transitions; Export records the edit to a WebM you can download.
Installation
Usage
import { ShotSequencer } from "@/components/ui/chatcn/pro/shot-sequencer"
<ShotSequencer shots={shots} onShotsChange={setShots} onExported={({ blob }) => upload(blob)} />By default Export records the sequence in the browser in real time to WebM (keep the tab in front). Pass onExport to render on your server and resolve with the file. A transition never takes more than 45% of either shot.
Examples
States
ProEmpty, a server export that fails and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
shots, defaultShots, onShotsChange | SequenceShot[] | source, duration, transition |
fps, aspectRatio, exportSize | ||
onExport, onExported, fileName | ||
labels, disabled, locale |
Keyboard
| Key | Action |
|---|---|
| Player keys | Space, J K L, comma and period |
Alt + arrows on a shot | Reorder |
Enter on a shot | Jump to it |
Accessibility
- Transitions are radio groups; export progress is a progressbar.
Motion
- The export bar fills with real progress; reordered shots glide 220 ms.