shadcn.io is not affiliated with official shadcn/ui
Staggered Reveal Gallery Block for React Aria
Eight drawn tile designs on a four by two hairline grid whose entrance order a visitor picks, row by row, column by column or from the centre, with a Replay button and everything at once under reduced motion.
Installation
Overview
An entrance you can choose, for React with React Aria, for Glazier Row, a tile showroom. A centred header carries a Reveal toggle (Row by row, Column by column, From the centre) and a Replay button, over eight drawn tile designs (quarter discs, harlequin diamonds, bias stripes, dots, a double check, chevrons, fish scale and crosses) on shared hairlines, four across from md and two on a phone, ending the block. On load, and again whenever the order changes or Replay is pressed, each tile fades, rises and settles into place with a delay set by its position in the chosen order; the delays are worked out for the four-across grid and for the two-across one, so "column by column" fills the first column first on a phone too. Under reduced motion every tile is simply there. The pictures are drawn, not photographed. It's built from Toggle Group, Button and Guides, with CSS transitions (starting: styles and a delay per tile) and your theme's tokens for every colour. The showroom and its tiles are made up for the example.
FAQ
How is each tile's delay worked out?
From its place in the grid and the chosen order, at the top of the file: row by row steps through the tiles in reading order, column by column steps down each column in turn, and from the centre uses each tile's distance from the middle, so the four middle tiles arrive together and the corners last. Each tile carries two delays as CSS variables, one for the four-across grid and one for the two-across grid, and the class picks the one for the screen's width.
How does Replay run the entrance again?
The grid has a key that changes with each run, so React mounts it afresh and the tiles' starting: styles apply again. Changing the order does the same. A polite status line says "From the centre, replaying" for a screen reader.
What happens with reduced motion?
The transition is switched off, so every tile is there at once and replaying changes nothing visible. The toggle still works, so the choice is the same on every screen.
How does the toggle work with a keyboard?
Tab reaches the group, the arrow keys move between the three orders and the chosen one is filled with the foreground colour, not the primary, so the page's one accent stays on its action. The group is a single selection that disallows an empty selection.
How are the tiles drawn?
Each tile is a scene of the tile kind: a seed that picks one of eight designs (the number is the design) and a light that moves the raking shadow across it. The design is repeated across the square as paths in your theme's own greys, so two tiles never look alike, and nothing is random at render time.