KQ-1145 · JOG/SHUTTLE

Jog Shuttle

An edit deck's transport control: a jog wheel that turns 1:1 under the finger and steps the playhead one frame per detent, inside a spring-loaded shuttle ring whose twist sets a speed that doubles zone by zone up to shuttleMax. Let go spinning, the wheel is a flywheel: its landing is projected from the release spin, snapped to a detent and reached on a critically damped spring with the same time constant, so it slows exponentially and stops on a detent, stepping and ticking as it goes; let go of the ring and the playhead stops while the ring swings home on the return spring with the release's spin. Arrows jog a frame (Shift ten, PageUp and PageDown a second) by turning the wheel through the same detents, and J, K and L shuttle reverse, stop and forward, faster each press, with the ring twisting and holding to show it.

KQ-1145 · JOG/SHUTTLE

Interview, take 3

paused · jog for frames, j k l to shuttle

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/jog-shuttle

Props

value / defaultValue: number; default min; The playhead, in frames. Controlled or uncontrolled; a frame the host refuses is not where the next step starts.
onValueChange: (frame: number) => void; default —; Fires from the jog detent, the shuttle frame or the key that moved the playhead.
onSpeedChange: (speed: number) => void; default —; Fires when the shuttle speed changes, from the twist or key that changed it: signed (negative in reverse), 0 when stopped.
min: number; default 0; The first frame.
max: number; default 1439; The last frame.
fps: number; default 24; Frames per second: the timecode, how far PageUp and PageDown jump, and the shuttle's rate (a 4× shuttle runs 4 × fps frames a second).
label: string; default —; What is being scrubbed: the control's accessible name, shown over the timecode.
detents: number; default 24; Detents per revolution of the jog wheel, 12 to 48. One detent is one frame, so fewer detents are further apart under the finger.
inertia: number; default 0.5; How far the jog wheel coasts when let go spinning, 0 to 1: at 0 it stops dead in the nearest detent, at 1 it runs on like a heavy flywheel.
shuttleMax: number; default 16; The shuttle's top speed. The ring's travel is split into zones that double from 1× up to it (16 gives 1, 2, 4, 8 and 16×), marked on the collar.
spring: number; default 0.5; The ring's return spring, 0 to 1: soft swings past centre and back, firm goes straight home. Key twists move the ring on the same spring.
sound: boolean; default false; A detent tick per frame jogged (a clack at either end), a click as the ring enters each zone, and a whir while shuttling whose pitch rises with the speed. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the control, stops any shuttle, takes both parts out of the tab order and ignores drags and keys.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
value / defaultValue	number	min	The playhead, in frames. Controlled or uncontrolled; a frame the host refuses is not where the next step starts.
onValueChange	(frame: number) => void	—	Fires from the jog detent, the shuttle frame or the key that moved the playhead.
onSpeedChange	(speed: number) => void	—	Fires when the shuttle speed changes, from the twist or key that changed it: signed (negative in reverse), 0 when stopped.
min	number	0	The first frame.
max	number	1439	The last frame.
fps	number	24	Frames per second: the timecode, how far PageUp and PageDown jump, and the shuttle's rate (a 4× shuttle runs 4 × fps frames a second).
label	string	—	What is being scrubbed: the control's accessible name, shown over the timecode.
detents	number	24	Detents per revolution of the jog wheel, 12 to 48. One detent is one frame, so fewer detents are further apart under the finger.
inertia	number	0.5	How far the jog wheel coasts when let go spinning, 0 to 1: at 0 it stops dead in the nearest detent, at 1 it runs on like a heavy flywheel.
shuttleMax	number	16	The shuttle's top speed. The ring's travel is split into zones that double from 1× up to it (16 gives 1, 2, 4, 8 and 16×), marked on the collar.
spring	number	0.5	The ring's return spring, 0 to 1: soft swings past centre and back, firm goes straight home. Key twists move the ring on the same spring.
sound	boolean	false	A detent tick per frame jogged (a clack at either end), a click as the ring enters each zone, and a whir while shuttling whose pitch rises with the speed. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the control, stops any shuttle, takes both parts out of the tab order and ignores drags and keys.
className	string	—	Merged onto the root's classes.