Video comparePro
Two to four takes of one prompt in lockstep from one transport. Shorter takes hold their last frame, pick the winner on its tile or with 1 to 4, and two takes can share one frame in a split view.
On this page
ProFour seeds of one prompt in lockstep from one transport. Step frames with comma and period, pick the winner with 1 to 4; the shorter take holds its last frame.
Installation
Usage
import { VideoCompare } from "@/components/ui/chatcn/pro/video-compare"
<VideoCompare variants={takes} onPickedChange={keep} />Each variant takes a source, a label and quiet meta. A variant can be rendering with progress or failed with an error; the others keep playing.
Examples
States
ProTwo models in the split view, three takes with one rendering and one failed and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
variants | CompareVariant[] | Two to four |
time, playing, defaultLoop | ||
layout | "grid" | "split" | Split needs two |
picked, defaultPicked, onPickedChange | ||
defaultSplit, aspectRatio, labels, disabled |
Keyboard
| Key | Action |
|---|---|
1 to 4 | Pick that take |
| Player keys | Space, J K L, comma and period, I and O |
| Arrows on the divider | Move the split |
Accessibility
- Pick buttons are toggles; the pick is announced.
Motion
- One clock drives every take; nothing eases between frames.