Duration Picker
How long a FLUX 3 Video clip runs: Auto, or any whole second dragged out on one compact track.
In use
In the Video Studio's settings, setting the keyframe timeline's length and the price, which is per second.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/duration-picker.jsonDurationPicker
Auto toggles; the track picks a length, with arrow keys a second at a time and Page Up/Down five. Leaving Auto returns to the last length. Send the value as duration, and it sets the Keyframe Timeline's length.
| Prop | Type | Default |
|---|---|---|
| value | number | "auto"The API's duration: whole seconds, or auto to fit the content. | — |
| defaultValue | number | "auto"The starting duration, uncontrolled. | "auto" |
| onValueChange | (value: number | "auto") => voidCalled with the new duration. | — |
| min / max | numberThe range, in seconds. Spread a DURATIONS preset, e.g. flux3VideoContinue for 5–15. | 5 / 20 |
| formatLabel | (seconds: number) => stringLabels the length on the track, "8s" by default. | formatSeconds |
| disabled | booleanDims the picker and ignores input. | false |
Helpers
| Prop | Type | Default |
|---|---|---|
| DURATIONS | Record<string, { min: number; max: number }>Seconds per mode: flux3Video (t2v and i2v, 5–20) and flux3VideoContinue (v2v, 5–15). | — |
| formatSeconds | (seconds: number) => string"8s": the default label. | — |
| Duration | number | "auto"The value type, as the API takes it. | — |