Typographic Wall

A wall of scrambling glyphs that decodes scattered words, line by line

typographic-wall-tw

Customize

Words

Wall

Font Size

14px

Font Weight

500

Line Height

1.80

Letter Spacing

0.12em

Density

0.70

Wall Opacity

0.10

Shimmer

0.35Hz

Scramble Rate

12Hz

Scan Duration

2.6s

Hold Duration

5.0s

Rest Duration

0.8s

Stagger

0.50

Band Width

0.09

Edge Fade

0.10

LoopShuffleInteractiveClick To ShufflePaused

Props

Name	Type	Default	Description
`words`	string \| (string \| { label, href })[]	`"Work\|Studio\|Journal\|Archive\|Careers\|Press\|Contact\|Newsletter"`	The words the wall decodes, as an array or a string separated by \|. Give a word an href to make it a real link.
`colors`	[string, string]	`["#F4F1FF", "#B19EEF"]`	The colour of the decoded words, and the colour of the glyph wall. The scan band blends between the two.
`charset`	string	`"letters"`	Glyphs the wall scrambles through: "letters", "upper", "lower", "digits", "binary", "hex", "symbols", or any string of your own characters.
`layout`	"scatter" \| "diagonal" \| "list" \| "center"	`"scatter"`	Where the words land: scattered across the wall, stepping down a diagonal, in a left-aligned index, or stacked in the centre like a menu.
`direction`	"down" \| "up" \| "right" \| "left" \| "diagonal"	`"down"`	Direction the scan sweeps across the wall.
`fontFamily`	string	`system monospace`	Font for the wall and the words. A monospace font keeps the grid even.
`fontWeight`	number	`500`	Font weight.
`fontSize`	number	`14`	Size of every glyph in pixels.
`lineHeight`	number	`1.8`	Row height as a multiple of the font size.
`letterSpacing`	number	`0.12`	Extra space between columns, in em.
`density`	number	`0.7`	Share of the wall that is filled with glyphs, from 0 to 1. Cells slowly come and go around this level.
`wallOpacity`	number	`0.1`	Opacity of the resting wall, from 0 to 1.
`shimmer`	number	`0.35`	How many times per second each resting glyph changes.
`scrambleRate`	number	`12`	How many times per second glyphs change inside the scan band and while a word decodes.
`scanDuration`	number	`2.6`	Seconds for the scan to sweep the whole wall.
`holdDuration`	number	`5`	Seconds the words stay before the wall dissolves them.
`restDuration`	number	`0.8`	Seconds of plain wall between a dissolve and the next reveal.
`stagger`	number	`0.5`	How long each word takes to type itself in letter by letter after the scan reaches it, from 0 (all at once) to 1.
`bandWidth`	number	`0.09`	Width of the bright scan band, as a fraction of the wall.
`loop`	boolean	`true`	Dissolve and reveal again after every hold. Turn off to decode once and keep the words.
`shuffle`	boolean	`true`	Place the words somewhere new on every cycle.
`edgeFade`	number	`0.1`	Softens the wall into the page at its edges, as a fraction of the shorter side.
`interactive`	boolean	`true`	Hovering or focusing a word clears the noise around it, dims the other words and draws an underline beneath it. The wall holds while a word is focused.
`clickToShuffle`	boolean	`true`	Clicking the wall away from the words dissolves them and decodes a new arrangement.
`onWordClick`	(word: string, index: number) => void	`—`	Called when a word is clicked. Words without an href become buttons when this is set.
`paused`	boolean	`false`	Freeze the wall with every word shown. Reduced-motion users always get this still state.
`quality`	number	`1`	Resolution scale from 0.25 to 1.
`ref`	{ shuffle, replay, focus }	`—`	shuffle() decodes a new arrangement, replay() dissolves and decodes the same one again, focus(index) highlights a word (null clears it).
`children`	ReactNode	`—`	Content placed over the wall.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

wordsstring | (string | { label, href })[]

The words the wall decodes, as an array or a string separated by |. Give a word an href to make it a real link.

colors[string, string]

The colour of the decoded words, and the colour of the glyph wall. The scan band blends between the two.

Default["#F4F1FF", "#B19EEF"]

charsetstring

Glyphs the wall scrambles through: "letters", "upper", "lower", "digits", "binary", "hex", "symbols", or any string of your own characters.

Default"letters"

layout"scatter" | "diagonal" | "list" | "center"

Where the words land: scattered across the wall, stepping down a diagonal, in a left-aligned index, or stacked in the centre like a menu.

Default"scatter"

direction"down" | "up" | "right" | "left" | "diagonal"

Direction the scan sweeps across the wall.

Default"down"

fontFamilystring

Font for the wall and the words. A monospace font keeps the grid even.

Defaultsystem monospace

fontWeightnumber

Font weight.

Default500

fontSizenumber

Size of every glyph in pixels.

Default14

lineHeightnumber

Row height as a multiple of the font size.

Default1.8

letterSpacingnumber

Extra space between columns, in em.

Default0.12

densitynumber

Share of the wall that is filled with glyphs, from 0 to 1. Cells slowly come and go around this level.

Default0.7

wallOpacitynumber

Opacity of the resting wall, from 0 to 1.

Default0.1

shimmernumber

How many times per second each resting glyph changes.

Default0.35

scrambleRatenumber

How many times per second glyphs change inside the scan band and while a word decodes.

Default12

scanDurationnumber

Seconds for the scan to sweep the whole wall.

Default2.6

holdDurationnumber

Seconds the words stay before the wall dissolves them.

Default5

restDurationnumber

Seconds of plain wall between a dissolve and the next reveal.

Default0.8

staggernumber

How long each word takes to type itself in letter by letter after the scan reaches it, from 0 (all at once) to 1.

Default0.5

bandWidthnumber

Width of the bright scan band, as a fraction of the wall.

Default0.09

loopboolean

Dissolve and reveal again after every hold. Turn off to decode once and keep the words.

Defaulttrue

shuffleboolean

Place the words somewhere new on every cycle.

Defaulttrue

edgeFadenumber

Softens the wall into the page at its edges, as a fraction of the shorter side.

Default0.1

interactiveboolean

Hovering or focusing a word clears the noise around it, dims the other words and draws an underline beneath it. The wall holds while a word is focused.

Defaulttrue

clickToShuffleboolean

Clicking the wall away from the words dissolves them and decodes a new arrangement.

Defaulttrue

onWordClick(word: string, index: number) => void

Called when a word is clicked. Words without an href become buttons when this is set.

Default—

pausedboolean

Freeze the wall with every word shown. Reduced-motion users always get this still state.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1.

Default1

ref{ shuffle, replay, focus }

shuffle() decodes a new arrangement, replay() dissolves and decodes the same one again, focus(index) highlights a word (null clears it).

Default—

childrenReactNode

Content placed over the wall.

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

words

string | (string | { label, href })[]

The words the wall decodes, as an array or a string separated by |. Give a word an href to make it a real link.

colors

[string, string]

["#F4F1FF", "#B19EEF"]

The colour of the decoded words, and the colour of the glyph wall. The scan band blends between the two.

charset

string

"letters"

Glyphs the wall scrambles through: "letters", "upper", "lower", "digits", "binary", "hex", "symbols", or any string of your own characters.

layout

"scatter" | "diagonal" | "list" | "center"

"scatter"

Where the words land: scattered across the wall, stepping down a diagonal, in a left-aligned index, or stacked in the centre like a menu.

direction

"down" | "up" | "right" | "left" | "diagonal"

"down"

Direction the scan sweeps across the wall.

fontFamily

string

system monospace

Font for the wall and the words. A monospace font keeps the grid even.

fontWeight

number

500

Font weight.

fontSize

number

14

Size of every glyph in pixels.

lineHeight

number

1.8

Row height as a multiple of the font size.

letterSpacing

number

0.12

Extra space between columns, in em.

density

number

0.7

Share of the wall that is filled with glyphs, from 0 to 1. Cells slowly come and go around this level.

wallOpacity

number

0.1

Opacity of the resting wall, from 0 to 1.

shimmer

number

0.35

How many times per second each resting glyph changes.

scrambleRate

number

12

How many times per second glyphs change inside the scan band and while a word decodes.

scanDuration

number

2.6

Seconds for the scan to sweep the whole wall.

holdDuration

number

5

Seconds the words stay before the wall dissolves them.

restDuration

number

0.8

Seconds of plain wall between a dissolve and the next reveal.

stagger

number

0.5

How long each word takes to type itself in letter by letter after the scan reaches it, from 0 (all at once) to 1.

bandWidth

number

0.09

Width of the bright scan band, as a fraction of the wall.

loop

boolean

true

Dissolve and reveal again after every hold. Turn off to decode once and keep the words.

shuffle

boolean

true

Place the words somewhere new on every cycle.

edgeFade

number

0.1

Softens the wall into the page at its edges, as a fraction of the shorter side.

interactive

boolean

true

Hovering or focusing a word clears the noise around it, dims the other words and draws an underline beneath it. The wall holds while a word is focused.

clickToShuffle

boolean

true

Clicking the wall away from the words dissolves them and decodes a new arrangement.

onWordClick

(word: string, index: number) => void

—

Called when a word is clicked. Words without an href become buttons when this is set.

paused

boolean

false

Freeze the wall with every word shown. Reduced-motion users always get this still state.

quality

number

1

Resolution scale from 0.25 to 1.

ref

{ shuffle, replay, focus }

—

shuffle() decodes a new arrangement, replay() dissolves and decodes the same one again, focus(index) highlights a word (null clears it).

children

ReactNode

—

Content placed over the wall.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.