PRO

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.

Component

Design that Captivates

( Explore Below )

( Return to the Beginning )

Install
npx shadcn@latest add https://ui.aryank.space/r/pinned-scale-mosaic.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
rowsMosaicCell[][]Ten sparse rowsFour cells per row. Each cell is an image plus a scale origin, or null for an empty slot.
introHeading / introLabel / outroLabelstringBLANK copyThe screens either side of the grid.
embeddedbooleantrueOwn the scroll container so it fits a bounded box. Set false to drive it from the window scroll.
Customize
rowstext

The grid layout: four cells per row, null for a gap.

Dependencies
gsaplenis