KQ-1409 · CLICK/BLOOM

Click Bloom

A wrapper whose every click opens a small flower on one canvas: the petals unfold out of the press point on springs.snap's response with the pollen popping on springs.recoil's, then each lets go in its own moment, thrown outward by spread to fall under gravity through air that slows it, tumbling in 3D on two axes so it thins to an edge, shows its darker back and slips sideways as it turns, while a few heavier seeds burst out ahead. Rapid clicks layer blooms; keyboard clicks — Enter or Space on anything inside — bloom from the centre of what was activated.

KQ-1409 · CLICK/BLOOM

Fernworks · spring sowing

Every click plants something.

142 rows sown

no blooms yet · click anywhere

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/click-bloom

Props

children: ReactNode; default —; What blooms when clicked; it stays fully interactive.
petals: number; default 7; Petals in each bloom, 3 to 12.
spread: number; default 1; How far the petals are thrown when they let go, as a multiple of the house throw.
gravity: number; default 700; How hard petals and seeds fall, in px/s².
seeds: number; default 4; Seeds thrown with each bloom, 0 to 12; heavier and quicker than the petals.
size: number; default 12; A petal's length, in CSS pixels.
drag: number; default 0.5; Air resistance, 0 (petals drop like stones) to 1 (they float and drift).
tumble: number; default 0.6; How hard petals turn over as they fall, 0 to 1.
duration: number; default 1400; How long a bloom lives, in ms, before its last petal has faded.
colors: string[]; default pigments of --accent, --signal and --warn; The blooms' colours, any CSS colours resolved on the element; each bloom takes the next.
max: number; default 8; The most blooms in the air at once; the oldest retires early to make room.
trigger: "press" | "click"; default "press"; Bloom on the press itself, or on the completed click; keyboard clicks bloom either way.
disabled: boolean; default false; No blooms.
onBloom: (point: { x: number; y: number }) => void; default —; Fires with each bloom the visitor opens, at its point in the box's own pixels.
sound: boolean; default false; A soft pop with each bloom the visitor opens.
seed: number; default 11; Seed for every petal's throw, spin and lifetime.
dpr: number; default 2; The highest device pixel ratio the canvas draws at (never above 2).
className: string; default —; Classes for the box.
ref: Ref<ClickBloomHandle>; default —; Exposes bloom(x?, y?), which opens a silent bloom at a point in the box (its centre when omitted).

Prop	Type	Default	Description
children	ReactNode	—	What blooms when clicked; it stays fully interactive.
petals	number	7	Petals in each bloom, 3 to 12.
spread	number	1	How far the petals are thrown when they let go, as a multiple of the house throw.
gravity	number	700	How hard petals and seeds fall, in px/s².
seeds	number	4	Seeds thrown with each bloom, 0 to 12; heavier and quicker than the petals.
size	number	12	A petal's length, in CSS pixels.
drag	number	0.5	Air resistance, 0 (petals drop like stones) to 1 (they float and drift).
tumble	number	0.6	How hard petals turn over as they fall, 0 to 1.
duration	number	1400	How long a bloom lives, in ms, before its last petal has faded.
colors	string[]	pigments of --accent, --signal and --warn	The blooms' colours, any CSS colours resolved on the element; each bloom takes the next.
max	number	8	The most blooms in the air at once; the oldest retires early to make room.
trigger	"press" \| "click"	"press"	Bloom on the press itself, or on the completed click; keyboard clicks bloom either way.
disabled	boolean	false	No blooms.
onBloom	(point: { x: number; y: number }) => void	—	Fires with each bloom the visitor opens, at its point in the box's own pixels.
sound	boolean	false	A soft pop with each bloom the visitor opens.
seed	number	11	Seed for every petal's throw, spin and lifetime.
dpr	number	2	The highest device pixel ratio the canvas draws at (never above 2).
className	string	—	Classes for the box.
ref	Ref<ClickBloomHandle>	—	Exposes bloom(x?, y?), which opens a silent bloom at a point in the box (its centre when omitted).