Tile Reveal
A sticky image grid whose tiles fly in column by column on scroll, then zoom past the edges to reveal a headline and call to action
Customize
Props
20| Name | Type | Default | Description |
|---|---|---|---|
images | string[] | — | Image URLs laid out row by row into the grid. |
headline | ReactNode | — | Content that stays visible through the whole sequence, centred over the tiles. |
children | ReactNode | — | Content revealed once the tiles have cleared the stage. |
columns | number | 3 | Number of grid columns. |
gap | number | 28 | Gap between tiles in pixels. |
gridWidth | number | 720 | Maximum grid width in pixels; shrinks with the viewport. |
tileAspect | number | 1 | Width to height ratio of each tile. |
tileRadius | number | 0 | Corner radius of each tile in pixels. |
grayscale | boolean | true | Render the images in grayscale. |
direction | "alternate" | "top" | "bottom" | "alternate" | Which edge columns enter from. |
stagger | number | 0.06 | Delay between tiles in a column, relative to one tile's flight time. |
overlap | number | 0.6 | How far the zoom phase overlaps the fly-in, as a fraction of one flight. |
zoom | number | 2.05 | Scale the grid reaches before the tiles leave the stage. |
spread | number | 0.4 | Minimum push, as a fraction of a tile, the columns and centre rows spread apart. Tiles always travel at least far enough to clear the stage. |
scrollLength | number | 3 | Extra viewport heights of scroll that drive the sequence. |
scrub | number | 0.08 | Seconds the motion lags behind the scroll position. Zero locks to it. |
contentGap | number | 28 | Gap between the headline and the revealed content in pixels. |
backgroundColor | string | "transparent" | Stage background. |
onProgress | (progress: number) => void | — | Called with the sequence progress from 0 to 1. |
className | string | — | Extra classes for the outer section. |
imagesstring[]Image URLs laid out row by row into the grid.
—headlineReactNodeContent that stays visible through the whole sequence, centred over the tiles.
—childrenReactNodeContent revealed once the tiles have cleared the stage.
—columnsnumberNumber of grid columns.
3gapnumberGap between tiles in pixels.
28gridWidthnumberMaximum grid width in pixels; shrinks with the viewport.
720tileAspectnumberWidth to height ratio of each tile.
1tileRadiusnumberCorner radius of each tile in pixels.
0grayscalebooleanRender the images in grayscale.
truedirection"alternate" | "top" | "bottom"Which edge columns enter from.
"alternate"staggernumberDelay between tiles in a column, relative to one tile's flight time.
0.06overlapnumberHow far the zoom phase overlaps the fly-in, as a fraction of one flight.
0.6zoomnumberScale the grid reaches before the tiles leave the stage.
2.05spreadnumberMinimum push, as a fraction of a tile, the columns and centre rows spread apart. Tiles always travel at least far enough to clear the stage.
0.4scrollLengthnumberExtra viewport heights of scroll that drive the sequence.
3scrubnumberSeconds the motion lags behind the scroll position. Zero locks to it.
0.08contentGapnumberGap between the headline and the revealed content in pixels.
28backgroundColorstringStage background.
"transparent"onProgress(progress: number) => voidCalled with the sequence progress from 0 to 1.
—classNamestringExtra classes for the outer section.
—