Clip Trimmer
Pick the part of a clip to send for a video edit, continuation or upscale: a filmstrip with in and out handles, and a playhead that loops the range.
Installation
Installs the Video Player and Scrub Bar too.
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/clip-trimmer.jsonSending the range
The API takes no trim, so your server cuts the range before submitting, e.g. ffmpeg -ss start -to end -i clip.mp4 trimmed.mp4, then sends it as video to /v1/flux-tools/video-edit-v1 (up to 15 s), as start_video to FLUX 3 Video with mode: "v2v", or as input_video to /v1/flux-tools/video-upscale-v1 (the first 20 s). A continuation carries on from the clip's final frames, so there the out point is what counts.
ClipTrimmer
| Prop | Type | Default |
|---|---|---|
| src | stringThe clip to trim. | — |
| value | { start: number; end: number }In and out points, in seconds. Or defaultValue, uncontrolled. Fitted to the clip once it loads; the whole clip if unset. | — |
| onValueChange | (range: ClipRange) => voidCalled with the new range, to the millisecond. | — |
| maxDuration | numberLongest range, in seconds, e.g. CLIP_LIMITS.videoEdit. Past it, the other handle follows. | Infinity |
| minDuration | numberShortest range, in seconds. | 1 |
| aspectRatio | number | stringOf the preview: a number, CSS "16 / 9", or the API's "16:9". | — |
| frames | numberHow many frames the filmstrip shows. | 10 |
Parts
| Prop | Type | Default |
|---|---|---|
| ClipTrimmerRoot | <div> props & range propsThe range, and the clip's playback shared with any Video Player parts inside. Loops the range while playing. | — |
| ClipTrimmerTrack | <div> propsPlayhead and in and out handles; the preview follows a handle as it moves. Children fill it. | — |
| ClipTrimmerFilmstrip | <div> props & { frames }Frames sampled across the clip, from a copy of it. | — |
| ClipTrimmerTimes | <div> propsIn point, length and out point. | — |
| useClipTrimmer | () => { range, setRange, minDuration, maxDuration }For your own parts. | — |
Helpers
| Prop | Type | Default |
|---|---|---|
| captureFrame | (video, seconds, { width?, type? }?) => Promise<string>The frame at seconds as a data URL, JPEG by default: a FLUX 3 Video keyframe or reference image. Seeks the video there. | — |
| CLIP_LIMITS | { videoEdit: 15; videoUpscale: 20 }The longest clip each endpoint takes, in seconds. | — |