ClipRangeSelector
StablePick the start and end of the part of a clip to extend, edit or re-do, with the longest length built in.
Also known as trim, clip trimmer, range trim
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Extend from part of an upload
Uploaded clip, kite on the hill
24 seconds
These work while focus is inside the player, and never while typing.
- SpaceK Play or pause
- ←→ Back or forward 1 second
- ,. or Shift with an arrow: one frame
- HomeEnd Start or end
- M Mute
const [range, setRange] = useState<[number, number]>([9, 15]);
const [time, setTime] = useState(11);
<VideoPlayer label="Uploaded clip, kite on the hill" scene="kite" duration={24} fps={24}
current={time} onTimeChange={setTime} hasAudio={false} />
<ClipRangeSelector
label="Part to extend from"
durationSec={24}
fps={24}
maxSpanSec={10}
minSpanSec={1}
range={range}
onRangeChange={setRange}
playhead={time}
renderThumbnail={(s) => <VideoScene scene="kite" time={s} duration={24} />}
/>Up to 10 seconds of a 24-second clip. Drag a handle or the window, use the keys (an arrow is one frame, Shift with an arrow is one second), type the times, or play the clip and press Set start or Set end at the playhead.
When to use it
Lets people choose exactly which part of a clip the AI should extend, edit or re-do, inside the limits the model has.
Made of: Label · Range and length readout · At the limit tag · Filmstrip · Start handle · Window · End handle · Playhead · Status line · Start and end fields · Set at playhead buttons
Use it for
- Choosing up to 10 seconds of an upload to edit.
- Picking the part of a take to re-do or extend from.
- Setting the start and end of a loop.
Not for
- Seeking to one moment: use FrameScrubber.
- Narrowing a chart over a long time range: use ChartRangeBrush.
- Ordering shots in a sequence.
Do and avoid
Do
- Set the model's real limit as maxSpanSec, so the limit shows up front.
- Pair it with a player and pass playhead.
- Keep the original clip when the edit is applied, and say so.
Avoid
- Don't let people pick a range that will fail later and then show an error.
- Don't make dragging the only way to set the range.
- Don't colour the window with the AI colour. Only the processing dot uses it.
On a phone
- The handles are 44px wide on touch screens and reach outside the strip edges, so they never cover each other.
- The number fields and buttons are 44px tall on touch screens and wrap under each other on narrow screens.
- A touch that starts on the strip does not scroll the page.
Seen in products
- Google Flow: select a segment of up to 10 seconds from an upload of up to 60 seconds.
- Sora's Re-cut regenerated a chosen segment, and its Loop editor had start and end handles.
- Early Runway Aleph edited 5 seconds per generation.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| durationSecrequired | number | none | Length of the clip in seconds. |
| rangerequired | [number, number] | none | Start and end in seconds. The parent owns it. |
| onRangeChangerequired | (range: [number, number]) => void | none | Called with the new start and end. |
| labelrequired | string | none | Name of the control, such as "Part to extend from". Also names the handles. |
| fps | number | none | Frames per second. Handles snap to frames and an arrow moves one frame. Without it they move a tenth of a second. |
| maxSpanSec | number | none | Longest range allowed. The window cannot be stretched past it. |
| minSpanSec | number | 1 | Shortest range allowed. |
| thumbnails | string[] | none | Still images for the filmstrip. |
| renderThumbnail | (seconds: number) => ReactNode | none | Draws one filmstrip tile for a time. |
| playhead | number | none | The player's position. Shows a playhead line and Set start or end buttons. |
| status | "editing" | "processing" | "applied" | "editing" | Processing locks the range while the AI works. |
| statusNote | string | none | Words for processing or applied. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ClipRangeSelector switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Editing, Processing, Applied |
| Label | label | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- at the limit
- When the range is as long as maxSpanSec, an "At the limit" tag shows beside the readout.
- too long
- A range passed in longer than maxSpanSec keeps its start, moves its end and says so.
Tokens
Change one of these and every part that uses it follows.
--fg--fg-muted--surface--surface-sunken--border--lime--success
Built in
- The handles are two sliders named "<label>, start" and "<label>, end", with times in words such as "Starts at 9 seconds".
- The window is a third slider that moves the whole range and says both ends and the length.
- An arrow moves one frame (or a tenth of a second), Shift with an arrow or Page Up and Page Down one second, Home and End to the furthest allowed.
- The length is announced once, after a drag ends or the keys stop, not on every step.
- Each handle stops at the minimum and maximum length instead of pushing the other handle.
- The number fields are named by the label, such as "Part to extend from, start in seconds".
- While processing, the sliders use aria-disabled and the fields and buttons are disabled; the status line says why.
- In forced colours the window and handles use system colours.
What you need to do
- Give a label that says what the part is for, such as "Part to extend from". It names both handles.
- Set maxSpanSec to the model's real limit, so the person cannot pick a range that will fail.
- Pass playhead from the player, so people can set the range without dragging.
- In processing and applied, pass a statusNote that says what is happening and that the original is kept.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide