KQ-1449 · PIXEL/BLOOM

Pixel Bloom

A background of square pixels that bloom: a ring leaves the point you press at 300 px/s and every pixel it reaches turns over about the axis facing it, onto its colour on the springs.recoil constants and on home on springs.glide after a short hold, so each pixel spins once through its colour and the bloom travels out as a ragged ring with the field closing behind it (a long hold lets the pixels land, two small bounces on their stops, and fills the bloom in). Past the reach the ring only knocks pixels on springs.snap, so the bloom fades into the field. A resting pointer blooms where it rests, the pixel under a hovering pointer warms toward the colour, soft blooms open on their own every few seconds, and keyboard focus on a control inside blooms from that control.

KQ-1449 · PIXEL/BLOOM

Fieldline

Every pixel, on purpose

Layout tools for interface teams

quiet · 10 px · 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/pixel-bloom

Props

children: React.ReactNode; default —; The content on top of the field: a hero line, a heading, a call to action.
pixel: number; default 10; The pixel pitch in px, 4 to 32.
gap: number; default 1; Page showing between pixels, px.
speed: number; default 1; How fast a bloom's ring travels, × 300 px/s, 0.25 to 3.
color: "cobalt" | "signal" | "ember" | "violet" | string; default "cobalt"; The face a pixel turns over to: a named pigment or any CSS colour.
reach: number; default 200; How far a bloom turns pixels fully over, px; past it they only tilt.
hold: number; default 90; How long a turned pixel rests on its colour before turning home, ms: short makes a ring, long a disc.
shape: "circle" | "diamond" | "square"; default "circle"; The ring's outline: round, a diamond or a square.
ambient: number; default 4200; A soft bloom opens on its own about this often, ms; 0 for never.
linger: number; default 650; A pointer resting this long blooms where it rests, ms; 0 for never.
interactive: boolean; default true; Presses, a resting pointer and keyboard focus inside open blooms.
pointerStrength: number; default 1; How hard a press blooms, 0 to 1: how far it reaches and how many pixels turn fully.
paused: boolean; default false; No blooms of its own; the visitor's still open.
seed: number; default 1; Seeds the field's tones, the ring's raggedness and where blooms open by themselves.
dpr: number; default 2; Cap on the canvas's device pixel ratio, at most 2.
sound: boolean; default false; A pop for every bloom the visitor opens. Off unless asked for.
onBloom: (bloom: { x: number; y: number; source: "press" | "linger" | "focus" | "ambient" }) => void; default —; Fires when a bloom opens, with where it opened and what opened it.
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 field: a hero line, a heading, a call to action.
pixel	number	10	The pixel pitch in px, 4 to 32.
gap	number	1	Page showing between pixels, px.
speed	number	1	How fast a bloom's ring travels, × 300 px/s, 0.25 to 3.
color	"cobalt" \| "signal" \| "ember" \| "violet" \| string	"cobalt"	The face a pixel turns over to: a named pigment or any CSS colour.
reach	number	200	How far a bloom turns pixels fully over, px; past it they only tilt.
hold	number	90	How long a turned pixel rests on its colour before turning home, ms: short makes a ring, long a disc.
shape	"circle" \| "diamond" \| "square"	"circle"	The ring's outline: round, a diamond or a square.
ambient	number	4200	A soft bloom opens on its own about this often, ms; 0 for never.
linger	number	650	A pointer resting this long blooms where it rests, ms; 0 for never.
interactive	boolean	true	Presses, a resting pointer and keyboard focus inside open blooms.
pointerStrength	number	1	How hard a press blooms, 0 to 1: how far it reaches and how many pixels turn fully.
paused	boolean	false	No blooms of its own; the visitor's still open.
seed	number	1	Seeds the field's tones, the ring's raggedness and where blooms open by themselves.
dpr	number	2	Cap on the canvas's device pixel ratio, at most 2.
sound	boolean	false	A pop for every bloom the visitor opens. Off unless asked for.
onBloom	(bloom: { x: number; y: number; source: "press" \| "linger" \| "focus" \| "ambient" }) => void	—	Fires when a bloom opens, with where it opened and what opened it.
className	string	"h-full w-full"	Sizes and shapes the box.