KQ-1437 · PULSE/TILES

Pulse Tiles

A background grid of rounded tiles lit by a beat: four beats to a bar at the tempo you set, and on the beats the grid plays diagonal waves, rings, a checkerboard answering itself and a curled spiral arm, each wave carrying the next palette colour. A struck tile flares, eases its colour into the wave's, swells inside its gap on the springs.recoil constants so the grid visibly taps in time, blooms into the gaps and fades; a press sends a ripple of the next colour out from that tile, and keyboard focus on a control inside parks the highlight there and sends a softer one.

KQ-1437 · PULSE/TILES

Waylight Sessions

Late sets, every Friday

Doors at 21:00 · 96 bpm on the floor

counting in · 96 bpm · cobalt

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/pulse-tiles

Props

children: React.ReactNode; default —; The content on top of the tiles: a hero line, a heading, a call to action.
tile: number; default 28; The tile pitch in px, 12 to 64: small tiles make a fine mosaic, large ones pads.
gap: number; default 3; How much page shows between tiles, px.
radius: number; default 5; A tile's corner radius, px.
tempo: number; default 96; Beats per minute, 30 to 200; four beats make a bar.
palette: "cobalt" | "dusk" | "reef" | "ember" | readonly string[]; default "cobalt"; A named palette, or 2 to 6 CSS colours of your own; each wave carries the next.
patterns: readonly ("diagonal" | "ripple" | "checker" | "spiral")[]; default ["diagonal", "ripple", "checker", "spiral"]; The patterns the grid plays, in turn.
bars: number; default 4; How many bars each pattern plays before the next one takes over.
decay: number; default 900; How long a struck tile takes to fade back to rest, ms.
glow: number; default 0.6; How far lit tiles bloom into the gaps around them, 0 to 1.
pop: number; default 0.5; How much a struck tile swells inside its gap, 0 to 1.
interactive: boolean; default true; A hovering pointer lifts the tile under it and a press sends a ripple.
pointerStrength: number; default 0.7; How far and how brightly a ripple from a press travels, 0 to 1.
paused: boolean; default false; Stop the beat: lit tiles fade and the grid rests until it is touched.
seed: number; default 1; Seeds where each pattern starts, which way it runs and the colour order.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
onPatternChange: (pattern: "diagonal" | "ripple" | "checker" | "spiral") => void; default —; Fires with the pattern now playing: once when the beat starts, then at every change.
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 tiles: a hero line, a heading, a call to action.
tile	number	28	The tile pitch in px, 12 to 64: small tiles make a fine mosaic, large ones pads.
gap	number	3	How much page shows between tiles, px.
radius	number	5	A tile's corner radius, px.
tempo	number	96	Beats per minute, 30 to 200; four beats make a bar.
palette	"cobalt" \| "dusk" \| "reef" \| "ember" \| readonly string[]	"cobalt"	A named palette, or 2 to 6 CSS colours of your own; each wave carries the next.
patterns	readonly ("diagonal" \| "ripple" \| "checker" \| "spiral")[]	["diagonal", "ripple", "checker", "spiral"]	The patterns the grid plays, in turn.
bars	number	4	How many bars each pattern plays before the next one takes over.
decay	number	900	How long a struck tile takes to fade back to rest, ms.
glow	number	0.6	How far lit tiles bloom into the gaps around them, 0 to 1.
pop	number	0.5	How much a struck tile swells inside its gap, 0 to 1.
interactive	boolean	true	A hovering pointer lifts the tile under it and a press sends a ripple.
pointerStrength	number	0.7	How far and how brightly a ripple from a press travels, 0 to 1.
paused	boolean	false	Stop the beat: lit tiles fade and the grid rests until it is touched.
seed	number	1	Seeds where each pattern starts, which way it runs and the colour order.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
onPatternChange	(pattern: "diagonal" \| "ripple" \| "checker" \| "spiral") => void	—	Fires with the pattern now playing: once when the beat starts, then at every change.
className	string	"h-full w-full"	Sizes and shapes the box.