KQ-1887 · SLOT/CANYON

Slot Canyon

An endless flight down a narrow sandstone slot canyon, raymarched in one WebGL2 pass: the walls are a distance field around a meandering centreline whose lean changes with height, so the slot winds one way at the floor and another overhead, banded with strata and carved with flowing flutes, glowing with light bounced down from a thin crack of sky — warm high up, violet-brown below. Where the crack opens, sun falls in shafts gathered by a short volumetric march through drifting dust, so the beams hang in the air and light the floor where they land. The pointer steers sideways and up toward the crack on the springs.glide constants, banking the camera so the canyon twists around you, and drifts home on springs.drift when it leaves; the arrow keys steer the same way, Home recentres and Space pauses the flight.

KQ-1887 · SLOT/CANYON

Coldbrook Outfitters · Spring routes

Go narrow.

flying · speed 0.35 · shafts 0.60 · space to pause

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/slot-canyon

Props

children: React.ReactNode; default —; Content over the flight: a hero line, a call to action. It stays fully interactive.
speed: number; default 0.35; How fast you fly, 0 (hanging still) to 1 (a fast run).
width: number; default 1; How wide the slot is, 0.6 (a squeeze) to 1.4 (a wider passage).
shafts: number; default 0.6; Sunlight through the crack, 0 (none) to 1 (bright shafts and lit floor).
steer: number; default 0.7; How far the pointer and arrow keys steer, 0 to 1.
twist: number; default 0.6; How much the camera banks with the steer and the slot's own bends, 0 to 1.
dust: number; default 0.5; Dust hanging and glinting in the shafts, 0 to 1.
strata: number; default 0.6; How strongly the rock is banded, 0 (plain) to 1 (bold strata).
colors: [string, string, string]; default sandstone pigments from the warn, danger and accent tokens; The lit rock, the shade, and the sky, as CSS colours.
paused / defaultPaused: boolean; default — / false; The flight holds where it is.
onPausedChange: (paused: boolean) => void; default —; Fires from the Space key that paused or resumed the flight.
seed: number; default 2; Seeds the canyon's course and its cracks.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
label: string; default "Slot canyon flight"; The scene's accessible name.
disabled: boolean; default false; No steering or keys.
className: string; default —; Sizes the scene; it fills its parent by default.

Prop	Type	Default	Description
children	React.ReactNode	—	Content over the flight: a hero line, a call to action. It stays fully interactive.
speed	number	0.35	How fast you fly, 0 (hanging still) to 1 (a fast run).
width	number	1	How wide the slot is, 0.6 (a squeeze) to 1.4 (a wider passage).
shafts	number	0.6	Sunlight through the crack, 0 (none) to 1 (bright shafts and lit floor).
steer	number	0.7	How far the pointer and arrow keys steer, 0 to 1.
twist	number	0.6	How much the camera banks with the steer and the slot's own bends, 0 to 1.
dust	number	0.5	Dust hanging and glinting in the shafts, 0 to 1.
strata	number	0.6	How strongly the rock is banded, 0 (plain) to 1 (bold strata).
colors	[string, string, string]	sandstone pigments from the warn, danger and accent tokens	The lit rock, the shade, and the sky, as CSS colours.
paused / defaultPaused	boolean	— / false	The flight holds where it is.
onPausedChange	(paused: boolean) => void	—	Fires from the Space key that paused or resumed the flight.
seed	number	2	Seeds the canyon's course and its cracks.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
label	string	"Slot canyon flight"	The scene's accessible name.
disabled	boolean	false	No steering or keys.
className	string	—	Sizes the scene; it fills its parent by default.