KQ-1473 · NIGHT/DRIVE

Night Drive

A background of a highway at night seen from a moving car, drawn as a long exposure: one WebGL2 pass casts every pixel onto the road, the light plane and its mirror under the wet asphalt, so oncoming headlights stream toward you in pale trails, taillights pull away to the vanishing point in red, dashes rush past and lamps pass overhead with long reflections while the road sweeps through slow bends. The pointer steers across your lanes on the springs.glide constants, and holding a press warps — speed, trail length and field of view stretch on glide and ease back to a cruise on springs.drift. Keyboard focus on a control inside steers toward it and surges.

KQ-1473 · NIGHT/DRIVE

Waylight FM · After hours

Music for the long way home

Live from midnight to six

cruising · 4 lanes · sodium

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/night-drive

Props

children: React.ReactNode; default —; The content on top of the road: a hero line, a heading, a call to action.
speed: number; default 1; How fast the car cruises, 0 (parked, the scene holds still) to 2.
lanes: number; default 4; Lanes across the road, 2 to 6; the left half is oncoming.
colors: "sodium" | "neon" | "ice" | "accent" | readonly string[]; default "sodium"; Headlights, taillights and street lamps: a named set, or three CSS colours of your own in that order.
traffic: number; default 0.6; How busy the road is, 0 (empty) to 1 (nose to tail).
streak: number; default 0.5; The exposure: how long each light's trail runs, 0 (short dashes) to 1 (long ribbons).
curve: number; default 0.5; How hard the road bends through its sweeping curves, 0 (dead straight) to 1.
reflection: number; default 0.6; How wet the asphalt is: how strongly every light is mirrored in it, 0 to 1.
lamps: boolean; default true; Street lamps along both shoulders, with their pools and reflections.
warpFactor: number; default 5; How many times faster the car goes at full warp, 1 to 10.
warp: boolean; default false; Hold the warp from outside: a button, a key, a scroll position. The pointer's own hold works either way.
onWarpChange: (warping: boolean) => void; default —; Fires when the visitor's hold puts the car into warp (true) or lets it ease back to a cruise (false).
interactive: boolean; default true; The pointer steers across the lanes and a held press warps; keyboard focus inside steers and surges.
pointerStrength: number; default 0.6; How far the hand steers the car across its lanes, 0 to 1.
paused: boolean; default false; Hold the scene still; steering and the warp still answer.
seed: number; default 1; Seeds the traffic and the bends, so two roads never match.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onActiveChange: (active: boolean) => void; default —; Fires when the pointer or keyboard focus starts (true) or stops (false) steering.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content on top of the road: a hero line, a heading, a call to action.
speed	number	1	How fast the car cruises, 0 (parked, the scene holds still) to 2.
lanes	number	4	Lanes across the road, 2 to 6; the left half is oncoming.
colors	"sodium" \| "neon" \| "ice" \| "accent" \| readonly string[]	"sodium"	Headlights, taillights and street lamps: a named set, or three CSS colours of your own in that order.
traffic	number	0.6	How busy the road is, 0 (empty) to 1 (nose to tail).
streak	number	0.5	The exposure: how long each light's trail runs, 0 (short dashes) to 1 (long ribbons).
curve	number	0.5	How hard the road bends through its sweeping curves, 0 (dead straight) to 1.
reflection	number	0.6	How wet the asphalt is: how strongly every light is mirrored in it, 0 to 1.
lamps	boolean	true	Street lamps along both shoulders, with their pools and reflections.
warpFactor	number	5	How many times faster the car goes at full warp, 1 to 10.
warp	boolean	false	Hold the warp from outside: a button, a key, a scroll position. The pointer's own hold works either way.
onWarpChange	(warping: boolean) => void	—	Fires when the visitor's hold puts the car into warp (true) or lets it ease back to a cruise (false).
interactive	boolean	true	The pointer steers across the lanes and a held press warps; keyboard focus inside steers and surges.
pointerStrength	number	0.6	How far the hand steers the car across its lanes, 0 to 1.
paused	boolean	false	Hold the scene still; steering and the warp still answer.
seed	number	1	Seeds the traffic and the bends, so two roads never match.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onActiveChange	(active: boolean) => void	—	Fires when the pointer or keyboard focus starts (true) or stops (false) steering.
className	string	"h-full w-full"	Sizes and shapes the box.