KQ-1178 · VIEW/MORPH

View Morph

A collection with a switch for its layout: choosing Grid, List or Board re-lays every entry, and each one travels to its new place on the glide spring through motion's shared layout while its cover grows into a tile, shrinks to a thumbnail or thins to a colour strip, the details only one view has fading in and out and the measured height gliding with them. The switch is a radiogroup whose thumb slides on snap, and the chosen view's glyph starts as the view being left and morphs its six bars into its own shape on the same spring. Arrow keys move and choose a view, Home and End jump, and each entry is a button when onOpen is given.

KQ-1178 · VIEW/MORPH

Basinworks field sites

6 of 9

Harbour wall
North weir
Salt marsh
Lock gates
Tidal pool
Pump house

grid · 6 of 9 sites · 2 Planned · 2 Surveying · 2 Filed

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/view-morph

Props

collection: { id: string; title: string; meta?: string; status?: string; tone?: "accent" | "signal" | "warn" | "danger" | "success" | "ink" }[]; default —; The entries. meta is the second line, status the board column's id, tone the cover's colour.
columns: { id: string; label: string }[]; default —; The board's columns, in order. Defaults to the statuses in order of appearance.
value / defaultValue: "grid" | "list" | "board"; default "grid"; The view, controlled or initial.
onValueChange: (view: "grid" | "list" | "board") => void; default —; Fires from the press or key that chose a view.
label: string; default "Collection"; The collection's heading and the name of its list and view switch.
stagger: number; default 0.5; How far apart the entries set off, 0 (all at once) to 1 (a ripple inside the 600ms budget).
items: number; default —; How many entries of the collection show; the header counts them against the whole. Defaults to all.
views: 2 | 3 | "2" | "3"; default 3; Offer grid and list, or grid, list and board.
maxHeight: number; default —; The most the collection grows to, in px; past it, it scrolls with a fade at the bottom edge.
onOpen: (id: string) => void; default —; An entry was opened. When given, every entry is a button named by its title, meta and status.
sound: boolean; default false; A click for the switch and a swish as the entries move, only when the visitor chose the view.
disabled: boolean; default false; The switch and the entries cannot be used.
className: string; default —; Classes for the root, a container-query box that fills its width.

Prop	Type	Default	Description
collection	{ id: string; title: string; meta?: string; status?: string; tone?: "accent" \| "signal" \| "warn" \| "danger" \| "success" \| "ink" }[]	—	The entries. meta is the second line, status the board column's id, tone the cover's colour.
columns	{ id: string; label: string }[]	—	The board's columns, in order. Defaults to the statuses in order of appearance.
value / defaultValue	"grid" \| "list" \| "board"	"grid"	The view, controlled or initial.
onValueChange	(view: "grid" \| "list" \| "board") => void	—	Fires from the press or key that chose a view.
label	string	"Collection"	The collection's heading and the name of its list and view switch.
stagger	number	0.5	How far apart the entries set off, 0 (all at once) to 1 (a ripple inside the 600ms budget).
items	number	—	How many entries of the collection show; the header counts them against the whole. Defaults to all.
views	2 \| 3 \| "2" \| "3"	3	Offer grid and list, or grid, list and board.
maxHeight	number	—	The most the collection grows to, in px; past it, it scrolls with a fade at the bottom edge.
onOpen	(id: string) => void	—	An entry was opened. When given, every entry is a button named by its title, meta and status.
sound	boolean	false	A click for the switch and a swish as the entries move, only when the visitor chose the view.
disabled	boolean	false	The switch and the entries cannot be used.
className	string	—	Classes for the root, a container-query box that fills its width.