KQ-1476 · BEND/GRID

Bend Grid

A background of square prints hung on a wall in a grid that bends under the hand as if a lens were pressed into rubber: one WebGL2 pass draws every pixel through the lens, so the tiles under the hand swell, the gutters bend round them and a thin coloured fringe shows where the bend is steepest. The lens follows the hand on the springs.glide constants and its depth runs on springs.recoil, so a press sinks it with one overshoot and a lifted hand lets the rubber spring back flat through two small bounces. Keyboard focus on a control inside presses the lens behind it for one beat; the prints are sixteen seeded compositions in five pigments, or your own pictures.

KQ-1476 · BEND/GRID

Fieldline Gallery

Forty prints, one wall

Open late on Thursdays

6 across · resting

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

Props

children: React.ReactNode; default —; The content on top of the wall: a hero line, a heading, a call to action.
grid: number; default 6; How many tiles across, 3 to 10; rows fill the height.
strength: number; default 0.6; How deep the lens presses into the wall, 0 (barely) to 1 (deep).
radius: number; default 170; How far the lens reaches round the hand, px.
images: readonly string[]; default —; Pictures for the tiles (URLs, cropped to fill). Without them the wall hangs its own seeded prints.
palette: "gallery" | "accent" | "garden" | "mono" | readonly string[]; default "gallery"; The prints' five pigments: a named set, or five CSS colours of your own (paper first, ink last).
gap: number; default 8; The gutter between tiles, px.
corner: number; default 6; Each tile's corner radius, px.
chroma: number; default 0.5; A thin coloured fringe where the wall bends, 0 (none) to 1.
drift: number; default 0.3; How fast the wall pans by on its slow diagonal, 0 (still) to 1.
wall: string; default "var(--background)"; The wall itself, seen in the gutters.
interactive: boolean; default true; The pointer and keyboard focus press the lens into the wall.
paused: boolean; default false; Hold the wall still; the lens still presses.
seed: number; default 1; Seeds the prints and their order, so two walls 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) bending the wall.
onPressChange: (pressed: boolean) => void; default —; Fires when a press sinks the lens in (true) and when it lets go (false).
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 wall: a hero line, a heading, a call to action.
grid	number	6	How many tiles across, 3 to 10; rows fill the height.
strength	number	0.6	How deep the lens presses into the wall, 0 (barely) to 1 (deep).
radius	number	170	How far the lens reaches round the hand, px.
images	readonly string[]	—	Pictures for the tiles (URLs, cropped to fill). Without them the wall hangs its own seeded prints.
palette	"gallery" \| "accent" \| "garden" \| "mono" \| readonly string[]	"gallery"	The prints' five pigments: a named set, or five CSS colours of your own (paper first, ink last).
gap	number	8	The gutter between tiles, px.
corner	number	6	Each tile's corner radius, px.
chroma	number	0.5	A thin coloured fringe where the wall bends, 0 (none) to 1.
drift	number	0.3	How fast the wall pans by on its slow diagonal, 0 (still) to 1.
wall	string	"var(--background)"	The wall itself, seen in the gutters.
interactive	boolean	true	The pointer and keyboard focus press the lens into the wall.
paused	boolean	false	Hold the wall still; the lens still presses.
seed	number	1	Seeds the prints and their order, so two walls 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) bending the wall.
onPressChange	(pressed: boolean) => void	—	Fires when a press sinks the lens in (true) and when it lets go (false).
className	string	"h-full w-full"	Sizes and shapes the box.