KQ-1120 · CLIP/TRIM

Clip Trim

A trimmer over a procedural waveform: drag either handle to trim and everything outside it dims while the in point, kept length and out point update frame by frame; drag the middle to slide the whole window. Handles follow the finger 1:1, rubber-band against the clip's ends and against each other at the minimum length, spring back on snap with the release velocity and can be thrown, and with beat snapping every beat of the drawn grid is a detent the handle jumps to on flick with a tick. Space or a tap on the middle previews the kept part with a real-time playhead that blips on every beat; start, kept part and end are three sliders whose arrow keys move a step or a beat, Page keys a second or four beats, and Home and End jump to their limits.

KQ-1120 · CLIP/TRIM

Intro sting

take 3 · 120 bpm

keeps 0:02.0 – 0:06.5 · 4.5 s · space to preview

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/clip-trim

Props

value / defaultValue: { start: number; end: number }; default the whole clip; The kept span in seconds from the clip's start. Controlled or uncontrolled; while a drag is live the host's echoes are ignored, and on release the handles settle on whatever the host says.
onValueChange: (value: ClipTrimValue) => void; default —; Fires from the drag or key that changed the span, on a beat or a step.
duration: number; default 12; The clip's length, in seconds.
bpm: number; default 120; The clip's tempo: the beat grid, the beat snaps, the preview's blips and the waveform's pulse.
seed: number; default 7; Seeds the procedural waveform; the same seed always draws the same clip.
label: string; default "Clip"; The clip's name; the start, kept part and end sliders are named after it.
step: number; default 0.1; The span's resolution when not snapping to beats, and one arrow key's move.
format: (seconds: number) => string; default —; A time as printed under the strip. Defaults to m:ss.s.
onPreviewChange: (playing: boolean) => void; default —; Fires when the preview starts and when it stops, however it stopped.
minLength: number; default 1; The shortest the kept span can be, in seconds. The handles rubber-band against it.
snapBeats: boolean; default true; Draw the beat grid and move the handles and the window in beats, each one a detent with a tick. Off, they move freely at step resolution.
handle: "frame" | "bar" | "tab"; default "frame"; How the handles are drawn: a frame around the kept part with grips outside it, thin bars standing proud of the strip, or a hairline with a round tab under it.
density: number; default 5; The waveform's resolution in bars per second, from coarse blocks to fine texture.
sound: boolean; default false; A tick when a handle is grabbed, finds a beat or is stepped by a key, and a blip when the preview starts and on every beat it crosses. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the trimmer, takes it out of the tab order, ignores drags and stops a preview.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
value / defaultValue	{ start: number; end: number }	the whole clip	The kept span in seconds from the clip's start. Controlled or uncontrolled; while a drag is live the host's echoes are ignored, and on release the handles settle on whatever the host says.
onValueChange	(value: ClipTrimValue) => void	—	Fires from the drag or key that changed the span, on a beat or a step.
duration	number	12	The clip's length, in seconds.
bpm	number	120	The clip's tempo: the beat grid, the beat snaps, the preview's blips and the waveform's pulse.
seed	number	7	Seeds the procedural waveform; the same seed always draws the same clip.
label	string	"Clip"	The clip's name; the start, kept part and end sliders are named after it.
step	number	0.1	The span's resolution when not snapping to beats, and one arrow key's move.
format	(seconds: number) => string	—	A time as printed under the strip. Defaults to m:ss.s.
onPreviewChange	(playing: boolean) => void	—	Fires when the preview starts and when it stops, however it stopped.
minLength	number	1	The shortest the kept span can be, in seconds. The handles rubber-band against it.
snapBeats	boolean	true	Draw the beat grid and move the handles and the window in beats, each one a detent with a tick. Off, they move freely at step resolution.
handle	"frame" \| "bar" \| "tab"	"frame"	How the handles are drawn: a frame around the kept part with grips outside it, thin bars standing proud of the strip, or a hairline with a round tab under it.
density	number	5	The waveform's resolution in bars per second, from coarse blocks to fine texture.
sound	boolean	false	A tick when a handle is grabbed, finds a beat or is stepped by a key, and a blip when the preview starts and on every beat it crosses. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the trimmer, takes it out of the tab order, ignores drags and stops a preview.
className	string	—	Merged onto the root's classes.