Progressive Mosaic
A stable collection composition that gives the focused tile more room and reorganises its neighbours without becoming an expansion panel.
- collections
- mosaic
- re-prioritisation
- focus
- dense-flow
Arrival Commons Quiet Trace
Usage
usage
import { ProgressiveMosaic } from "@pinky-ui/layouts";
<ProgressiveMosaic items={studies} columns={3} defaultActiveId={studies[0].id} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ProgressiveMosaicItem[] | — | Stable keyed tiles with optional authored span intent. |
| columns | 2 | 3 | 4 | 3 | Desktop column count; mobile uses two. |
| activeId | string | — | Controlled tile receiving the larger composition role. |
Accessibility
- Tiles are native buttons with pressed state and stable DOM order.
- Arrow, Home and End keys move focus through the collection.
- The active role is communicated by state, never by size alone.
Performance
- Motion layout interpolates bounded grid changes; no measurement loop is created.
- The composition uses one active id and dense flow to avoid empty slots.
Reduced motion
The final prioritised grid is shown immediately with all labels and controls intact.
When to use
- Curated research, reference walls and content where interest should gently reweight the composition.
When not to use
- Data-heavy dashboards or interactions that need a persistent detail panel.