Tile Reveal

Image tiles that fly in on scroll to reveal a headline

tile-reveal-tw

Customize

Columns

Gap

28px

Grid Width

720px

Tile Aspect

1.00

Tile Radius

0px

Stagger

0.06

Overlap

0.60

Zoom

2.05

Spread

0.40

Scroll Length

3.0

Scrub

0.08s

Grayscale

Props

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	`false`	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.

Default—

headlineReactNode

Content that stays visible through the whole sequence, centred over the tiles.

Default—

childrenReactNode

Content revealed once the tiles have cleared the stage.

Default—

columnsnumber

Number of grid columns.

Default3

gapnumber

Gap between tiles in pixels.

Default28

gridWidthnumber

Maximum grid width in pixels; shrinks with the viewport.

Default720

tileAspectnumber

Width to height ratio of each tile.

Default1

tileRadiusnumber

Corner radius of each tile in pixels.

Default0

grayscaleboolean

Render the images in grayscale.

Defaultfalse

direction"alternate" | "top" | "bottom"

Which edge columns enter from.

Default"alternate"

staggernumber

Delay between tiles in a column, relative to one tile's flight time.

Default0.06

overlapnumber

How far the zoom phase overlaps the fly-in, as a fraction of one flight.

Default0.6

zoomnumber

Scale the grid reaches before the tiles leave the stage.

Default2.05

spreadnumber

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.

Default0.4

scrollLengthnumber

Extra viewport heights of scroll that drive the sequence.

Default3

scrubnumber

Seconds the motion lags behind the scroll position. Zero locks to it.

Default0.08

contentGapnumber

Gap between the headline and the revealed content in pixels.

Default28

backgroundColorstring

Stage background.

Default"transparent"

onProgress(progress: number) => void

Called with the sequence progress from 0 to 1.

Default—

classNamestring

Extra classes for the outer section.

Default—

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

false

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.