Scenesstable

Tessera

A tiled route transition: tiles cover the viewport, the route swaps, they retreat.

Home

phase: idle

The overlay is position: fixed in real use. It is held inside this frame so the docs stay usable.

Gridhow many tiles cover the viewport

Rows4rows

Columns6columns

Sequencesequence

Timingper-tile duration and the delay between tiles

Duration420 msduration

Stagger380 msstagger

Tile colourcolor

TSX

import { TesseraProvider } from "zerogravity"

<TesseraProvider>
    <App />
</TesseraProvider>

Generated from the controls above. Only props that differ from their defaults are shown.

7 documented props on TesseraProvider
Property	Type	Default	Description
`rows`	`number`	`4`	Rows. Range 1 to 12.
`columns`	`number`	`6`	Columns. Range 1 to 12.
`sequence`	`"random" \| "row" \| "column" \| "reverse" \| "center"`	`"random"`	Sequence.
`duration`	`number`	`420`	Duration. Range 120 to 1600 ms.
`stagger`	`number`	`380`	Stagger. Range 0 to 900 ms.
`color`	`string`	`"#0b0c11"`	Tile colour.
`children`	`ReactNode`	`—`	Your app. Navigation runs through useTessera().

0 external runtime dependencies

Ships with nothing but React.