Pinned Scale Mosaic
A sparse photo grid where every row grows in and then collapses away. Each row runs two triggers: one scales its images up from nothing as the row rises into view, a second pins the row at the top and scales them back to zero as it leaves, with pinSpacing off so the next row slides up over it. Images scale about their outer corner rather than their center, alternating left and right, so a row opens outward from the edges.
npx shadcn@latest add https://ui.aryank.space/r/pinned-scale-mosaic.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | MosaicCell[][] | Ten sparse rows | Four cells per row. Each cell is an image plus a scale origin, or null for an empty slot. |
| introHeading / introLabel / outroLabel | string | BLANK copy | The screens either side of the grid. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
rowstextThe grid layout: four cells per row, null for a gap.
gsaplenis















