KQ-1461 · HORIZON/GRID

Horizon Grid

A background of a fine grid floor running to the horizon, the camera travelling over it so the lines flow toward you, a soft band of light sweeping across the floor and a low glow breathing on the horizon. The camera banks and turns toward the hand on springs with the springs.drift constants and levels the same way when it leaves; a press on the bare background opens a ring of light across the floor in perspective while a critically damped surge carries the camera a few cells forward. Keyboard focus on a control inside leans the camera toward it and opens a softer ring under it.

KQ-1461 · HORIZON/GRID

Waylight Maps

The long way, mapped

Routes to the edge of the plain

14 lines · speed 1.0

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/horizon-grid

Props

children: React.ReactNode; default —; The content above the floor: a hero line, a heading, a call to action.
speed: number; default 1; How fast the camera travels over the floor, 0 (still) to 3.
density: number; default 14; How many grid lines span the near edge of the frame, 6 to 30.
color: string; default "var(--accent-bright)"; The light's colour, any CSS colour; taken at a fixed lightness so both themes read it the same.
horizon: number; default 0.5; Where the horizon rests, as a fraction of the height from the top, 0.2 to 0.7.
glow: number; default 0.6; How strong the breathing glow on the horizon is, 0 to 1.
sweep: number; default 0.6; How bright the band of light sweeping the floor is, 0 (none) to 1.
fog: number; default 0.5; How soon the far grid fades into the horizon haze, 0 (clear to the edge) to 1 (close).
lineWidth: number; default 1; The grid lines' width, CSS px, 0.5 to 2.
interactive: boolean; default true; The pointer and keyboard focus lean the camera, and a press opens a ring of light on the floor.
pointerStrength: number; default 0.6; How far the camera leans toward the hand and how bright a ring is, 0 to 1.
paused: boolean; default false; Hold the travel, the sweep and the breath still; the hand still leans the camera.
seed: number; default 1; Seeds where the grid and the band start, so two floors 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) leaning the camera.
onPulse: () => void; default —; Fires when a press (or keyboard focus) opens a ring of light on the floor.
className: string; default "h-full w-full"; Sizes and shapes the box.

Prop	Type	Default	Description
children	React.ReactNode	—	The content above the floor: a hero line, a heading, a call to action.
speed	number	1	How fast the camera travels over the floor, 0 (still) to 3.
density	number	14	How many grid lines span the near edge of the frame, 6 to 30.
color	string	"var(--accent-bright)"	The light's colour, any CSS colour; taken at a fixed lightness so both themes read it the same.
horizon	number	0.5	Where the horizon rests, as a fraction of the height from the top, 0.2 to 0.7.
glow	number	0.6	How strong the breathing glow on the horizon is, 0 to 1.
sweep	number	0.6	How bright the band of light sweeping the floor is, 0 (none) to 1.
fog	number	0.5	How soon the far grid fades into the horizon haze, 0 (clear to the edge) to 1 (close).
lineWidth	number	1	The grid lines' width, CSS px, 0.5 to 2.
interactive	boolean	true	The pointer and keyboard focus lean the camera, and a press opens a ring of light on the floor.
pointerStrength	number	0.6	How far the camera leans toward the hand and how bright a ring is, 0 to 1.
paused	boolean	false	Hold the travel, the sweep and the breath still; the hand still leans the camera.
seed	number	1	Seeds where the grid and the band start, so two floors 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) leaning the camera.
onPulse	() => void	—	Fires when a press (or keyboard focus) opens a ring of light on the floor.
className	string	"h-full w-full"	Sizes and shapes the box.