KQ-1570 · SEEDHEAD/GALLERY

Seedhead Gallery

Pictures set on the golden-angle spiral of a seed head: each seed keeps the angle it was born at while its distance grows with its age, so the core is dense and tiny and the rim roomy and large, every tile sized by the area its ring gives it. The emerged count is one motion value on springs.drift: as it rises new pictures emerge at the centre and push the rest outward along their rays, driven by the growth prop and by scrolling the page past the head; hover or focus enlarges a seed in place on springs.snap with its caption, and changing the angle re-spirals the head on springs.glide. The seeds are one roving tab stop: arrows walk the spiral, Home and End jump to the rim and the core, plus and minus grow and shrink it, Enter holds a seed and Escape lets it go.

KQ-1570 · SEEDHEAD/GALLERY

Fernworks seed library

89 varieties, scanned

53 grown of 89 · scroll to grow

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/seedhead-gallery

Props

items: { src?: string; alt: string; caption?: string }[]; default 89 drawn pictures; The pictures, oldest first: the first sits at the rim, the newest at the core, up to 233.
angle: number; default 137.5; The divergence between one seed and the next, degrees; 137.5 is the golden angle.
growth: number; default 0.6; How much of the head has emerged at rest, 0.1 to 1.
scale: number; default 1; Tile size as a share of the room each seed has, 0.5 to 1.5.
scrollGrowth: number; default 1; How far scrolling the page past the head grows it toward full, 0 to 1.
value / defaultValue: number | null; default null; The enlarged seed held by a click or Enter, controlled or initial.
onValueChange: (index: number | null) => void; default —; Fires from the click or key that held a seed or let it go.
zoom: number; default 96; How large a hovered or focused seed grows, px.
spread: number; default 0.7; How dense the core is, 0 (even) to 1 (tiny at the core, large at the rim).
captions: boolean; default true; Show a caption beside the enlarged seed.
trigger: "inView" | "mount"; default "inView"; What starts the first growth: coming into view, or mounting.
label: string; default "Seed head of pictures"; The head's accessible name.
disabled: boolean; default false; No growing, hovering or holding.
className: string; default —; Sizes the piece; it fills its parent by default (h-full w-full).

Prop	Type	Default	Description
items	{ src?: string; alt: string; caption?: string }[]	89 drawn pictures	The pictures, oldest first: the first sits at the rim, the newest at the core, up to 233.
angle	number	137.5	The divergence between one seed and the next, degrees; 137.5 is the golden angle.
growth	number	0.6	How much of the head has emerged at rest, 0.1 to 1.
scale	number	1	Tile size as a share of the room each seed has, 0.5 to 1.5.
scrollGrowth	number	1	How far scrolling the page past the head grows it toward full, 0 to 1.
value / defaultValue	number \| null	null	The enlarged seed held by a click or Enter, controlled or initial.
onValueChange	(index: number \| null) => void	—	Fires from the click or key that held a seed or let it go.
zoom	number	96	How large a hovered or focused seed grows, px.
spread	number	0.7	How dense the core is, 0 (even) to 1 (tiny at the core, large at the rim).
captions	boolean	true	Show a caption beside the enlarged seed.
trigger	"inView" \| "mount"	"inView"	What starts the first growth: coming into view, or mounting.
label	string	"Seed head of pictures"	The head's accessible name.
disabled	boolean	false	No growing, hovering or holding.
className	string	—	Sizes the piece; it fills its parent by default (h-full w-full).