KQ-1860 · READOUT/SKEW

Readout Skew

A small studio seen through a rolling-shutter camera, drawn per pixel in one WebGL2 pass: a band sweeps down the frame every readout and each row shows the scene as it was when the band last crossed it, so a spinning propeller bends into curved petals that re-form every sweep and the puck, whose position is kept for four seconds at 60 Hz, leans and wobbles like jelly when it moves fast, while the static grid and floor never bend. The puck is a real slider: a drag follows 1:1 and rubber-bands past the stops, a release slides on with friction and bounces off them, and a click on the track or the arrow, Page, Home and End keys send it on springs.snap, quick enough to lean; a puck released past a stop returns on springs.glide.

KQ-1860 · READOUT/SKEW

Waylight · sensor lab

roll 600 ms · 1 band · puck at 30%

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/readout-skew

Props

readout: number; default 600; How long the band takes to read the frame top to bottom, in ms, 200 to 2000. Slower readout, stronger bends.
bands: number; default 1; How many strips the sensor reads at once, 1 to 4: the bends repeat strip by strip with a seam between.
skew: number; default 1; How far each row's moment is pushed, 0 (no distortion: every row now) to 2 (twice the honest skew).
spin: number; default 2.4; How fast the propeller turns, in revolutions a second, 0 to 6.
blades: number; default 3; How many blades the propeller has, 2 to 6.
value / defaultValue: number; default — / 0.3; The puck's place along its track, 0 to 1: controlled, or where it starts when uncontrolled.
onValueChange: (value: number) => void; default —; Fires from the drag, click or key that moved the puck, with where it will come to rest, 0 to 1.
glow: number; default 0.6; How bright the scan band's roll of light is, 0 to 1.
bladeColor: string; default "var(--foreground)"; The propeller's colour, any CSS colour; resolved on the element so it follows the theme.
puckColor: string; default "oklch(from var(--accent-bright) 0.66 c h)"; The puck's colour: a pigment at a fixed lightness.
bandColor: string; default "var(--signal)"; The scan band's colour.
hud: boolean; default true; Show the viewfinder's corner marks and readout label.
children: React.ReactNode; default —; Content above the scene: a caption, a heading, a call to action.
interactive: boolean; default true; The puck can be dragged, thrown and moved with the keys.
paused: boolean; default false; Hold the band and the propeller where they are; the puck still answers.
label: string; default "Puck"; Names the puck's slider for assistive technology.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
disabled: boolean; default false; Shows the scene but takes no input.
className: string; default "h-56 w-full"; Sizes the box.

Prop	Type	Default	Description
readout	number	600	How long the band takes to read the frame top to bottom, in ms, 200 to 2000. Slower readout, stronger bends.
bands	number	1	How many strips the sensor reads at once, 1 to 4: the bends repeat strip by strip with a seam between.
skew	number	1	How far each row's moment is pushed, 0 (no distortion: every row now) to 2 (twice the honest skew).
spin	number	2.4	How fast the propeller turns, in revolutions a second, 0 to 6.
blades	number	3	How many blades the propeller has, 2 to 6.
value / defaultValue	number	— / 0.3	The puck's place along its track, 0 to 1: controlled, or where it starts when uncontrolled.
onValueChange	(value: number) => void	—	Fires from the drag, click or key that moved the puck, with where it will come to rest, 0 to 1.
glow	number	0.6	How bright the scan band's roll of light is, 0 to 1.
bladeColor	string	"var(--foreground)"	The propeller's colour, any CSS colour; resolved on the element so it follows the theme.
puckColor	string	"oklch(from var(--accent-bright) 0.66 c h)"	The puck's colour: a pigment at a fixed lightness.
bandColor	string	"var(--signal)"	The scan band's colour.
hud	boolean	true	Show the viewfinder's corner marks and readout label.
children	React.ReactNode	—	Content above the scene: a caption, a heading, a call to action.
interactive	boolean	true	The puck can be dragged, thrown and moved with the keys.
paused	boolean	false	Hold the band and the propeller where they are; the puck still answers.
label	string	"Puck"	Names the puck's slider for assistive technology.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
disabled	boolean	false	Shows the scene but takes no input.
className	string	"h-56 w-full"	Sizes the box.