Tessera Trail

A cursor trail of bouncy letter tiles

tessera-trail-tw

Customize

Text

Color A

Color B

Letters

Cell Size

40px

Gap

4.0px

Radius

9px

Life

1.10s

Max Tiles

Pop

1.00

Exit Scale

0.50

Jitter

0.40

Gloss

0.60

Spread

Font Weight

600

Autoplay Speed

1.00

Idle Delay

1.50s

BurstAutoplayInteractive

Props

Name	Type	Default	Description
`text`	string	`"CREATE"`	Letters stamped one per tile, in order, as the trail grows. Spaces are skipped and emoji work.
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Two colours the tiles flow between along the trail, blended in OKLab so the ramp stays vivid.
`textColor`	string	`"#FFFFFF"`	Colour of the letters. They carry a faint embossed shadow so they stay legible on light tiles.
`cellSize`	number	`40`	Size of each grid cell in pixels. Tiles snap to this grid.
`gap`	number	`4`	Grout between neighbouring tiles, in pixels.
`radius`	number	`9`	Corner radius of each tile in pixels.
`life`	number	`1.1`	Seconds a tile stays before it shrinks away.
`maxTiles`	number	`60`	Most tiles on screen at once. The oldest start leaving early beyond this.
`pop`	number	`1`	Overshoot of the springy pop as each tile lands, from 0 to 2.
`exitScale`	number	`0.5`	Size a tile shrinks to as it fades out. 1 keeps its size.
`jitter`	number	`0.4`	Random tilt of each tile, like hand-laid mosaic, from 0 (perfectly square) to 1.
`gloss`	number	`0.6`	Strength of the keycap highlight and shading, from 0 (flat) to 1.
`spread`	number	`3`	How many rings of tiles a click sends out across the grid.
`burst`	boolean	`true`	Clicking sends a diamond of tiles rippling out from the pointer and makes nearby tiles hop.
`fontWeight`	number	`600`	Weight of the letters.
`fontFamily`	string	`"inherit"`	Font of the letters. inherit uses the font of the surrounding page.
`autoplay`	boolean	`false`	Lay tiles along a wandering path while the pointer is away.
`autoplaySpeed`	number	`1`	Speed of that wandering.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before the wandering path takes over again.
`interactive`	boolean	`true`	Let the pointer and touch lay tiles. Reduced-motion users get plain tiles that appear and fade, with no pops, tilt, bursts or wandering.
`ref`	{ burst, clear }	`—`	burst(x, y) sends a ripple of tiles from a point, in pixels from the top-left corner. clear() removes every tile.
`children`	ReactNode	`—`	Content the tiles are laid over.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

Letters stamped one per tile, in order, as the trail grows. Spaces are skipped and emoji work.

Default"CREATE"

colors[string, string]

Two colours the tiles flow between along the trail, blended in OKLab so the ramp stays vivid.

Default["#5227FF", "#FF9FFC"]

textColorstring

Colour of the letters. They carry a faint embossed shadow so they stay legible on light tiles.

Default"#FFFFFF"

cellSizenumber

Size of each grid cell in pixels. Tiles snap to this grid.

Default40

gapnumber

Grout between neighbouring tiles, in pixels.

Default4

radiusnumber

Corner radius of each tile in pixels.

Default9

lifenumber

Seconds a tile stays before it shrinks away.

Default1.1

maxTilesnumber

Most tiles on screen at once. The oldest start leaving early beyond this.

Default60

popnumber

Overshoot of the springy pop as each tile lands, from 0 to 2.

Default1

exitScalenumber

Size a tile shrinks to as it fades out. 1 keeps its size.

Default0.5

jitternumber

Random tilt of each tile, like hand-laid mosaic, from 0 (perfectly square) to 1.

Default0.4

glossnumber

Strength of the keycap highlight and shading, from 0 (flat) to 1.

Default0.6

spreadnumber

How many rings of tiles a click sends out across the grid.

Default3

burstboolean

Clicking sends a diamond of tiles rippling out from the pointer and makes nearby tiles hop.

Defaulttrue

fontWeightnumber

Weight of the letters.

Default600

fontFamilystring

Font of the letters. inherit uses the font of the surrounding page.

Default"inherit"

autoplayboolean

Lay tiles along a wandering path while the pointer is away.

Defaultfalse

autoplaySpeednumber

Speed of that wandering.

Default1

idleDelaynumber

Seconds after the pointer leaves before the wandering path takes over again.

Default1.5

interactiveboolean

Let the pointer and touch lay tiles. Reduced-motion users get plain tiles that appear and fade, with no pops, tilt, bursts or wandering.

Defaulttrue

ref{ burst, clear }

burst(x, y) sends a ripple of tiles from a point, in pixels from the top-left corner. clear() removes every tile.

Default—

childrenReactNode

Content the tiles are laid over.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"CREATE"

Letters stamped one per tile, in order, as the trail grows. Spaces are skipped and emoji work.

colors

[string, string]

["#5227FF", "#FF9FFC"]

Two colours the tiles flow between along the trail, blended in OKLab so the ramp stays vivid.

textColor

string

"#FFFFFF"

Colour of the letters. They carry a faint embossed shadow so they stay legible on light tiles.

cellSize

number

40

Size of each grid cell in pixels. Tiles snap to this grid.

gap

number

4

Grout between neighbouring tiles, in pixels.

radius

number

9

Corner radius of each tile in pixels.

life

number

1.1

Seconds a tile stays before it shrinks away.

maxTiles

number

60

Most tiles on screen at once. The oldest start leaving early beyond this.

pop

number

1

Overshoot of the springy pop as each tile lands, from 0 to 2.

exitScale

number

0.5

Size a tile shrinks to as it fades out. 1 keeps its size.

jitter

number

0.4

Random tilt of each tile, like hand-laid mosaic, from 0 (perfectly square) to 1.

gloss

number

0.6

Strength of the keycap highlight and shading, from 0 (flat) to 1.

spread

number

3

How many rings of tiles a click sends out across the grid.

burst

boolean

true

Clicking sends a diamond of tiles rippling out from the pointer and makes nearby tiles hop.

fontWeight

number

600

Weight of the letters.

fontFamily

string

"inherit"

Font of the letters. inherit uses the font of the surrounding page.

autoplay

boolean

false

Lay tiles along a wandering path while the pointer is away.

autoplaySpeed

number

1

Speed of that wandering.

idleDelay

number

1.5

Seconds after the pointer leaves before the wandering path takes over again.

interactive

boolean

true

Let the pointer and touch lay tiles. Reduced-motion users get plain tiles that appear and fade, with no pops, tilt, bursts or wandering.

ref

{ burst, clear }

—

burst(x, y) sends a ripple of tiles from a point, in pixels from the top-left corner. clear() removes every tile.

children

ReactNode

—

Content the tiles are laid over.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.