Wave Lettering

A sea of text lines rolling in soft swells, in and out of focus

wave-lettering-tw

Customize

Text

Crest

Depth

Background

Glyph Size

13px

Rows

Font Weight

500

Letter Spacing

0.08em

Perspective

0.55

Tilt

24°

Horizon

0.36

Amplitude

1.60

Wavelength

0.70

Speed

1.00

Direction

0°

Sharpness

0.50

Envelope

0.00

Flow

0.8

Fog

0.60

Focus Depth

0.30

Depth Of Field

0.70

Focus Range

0.14

Strum Strength

1.00

Tension

1.00

Sustain

1.6s

AlternateHover FocusClick StrumInteractivePaused

Props

Name	Type	Default	Description
`text`	string	`"FORM FOLLOWS FEELING ·"`	The phrase repeated along every line of the sea.
`colors`	[string, string]	`["#FFFFFF", "#7C5CFF"]`	Colour of the text on the crests and nearby, and colour it fades to in the troughs and the distance, blended in OKLab.
`backgroundColor`	string	`"#0A0A0A"`	Colour of the water between the lines. Nearer crests hide the lines behind them in this colour.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow lets bright crests burn toward white on dark backgrounds; ink keeps colours true for light ones. auto picks from the background.
`fontFamily`	string	`inherited`	Font for the lettering. Leave unset to use the page font.
`fontWeight`	number	`500`	Font weight.
`letterSpacing`	number	`0.08`	Letter spacing in em.
`glyphSize`	number	`13`	Size of the nearest line of text, in pixels. Lines further away get smaller.
`rows`	number	`30`	Number of lines of text, from 2 to 64.
`perspective`	number	`0.55`	Depth of the view, from 0 (a flat stack of lines, like a ridgeline chart) to 1 (a deep sea running to the horizon).
`tilt`	number	`24`	How steeply you look down at the sea, in degrees.
`horizon`	number	`0.36`	Where the furthest line sits, as a fraction of the height from the top. Leaves room for a headline above.
`amplitude`	number	`1.6`	Height of the swell, measured in line spacings.
`wavelength`	number	`0.7`	Length of the swell relative to the width of the frame.
`speed`	number	`1`	Time scale for the swell.
`direction`	number	`0`	Direction the swell travels, in degrees. 0 rolls toward you.
`sharpness`	number	`0.5`	How peaked the crests are, from 0 (rounded) to 1 (sharp).
`envelope`	number	`0`	Gathers the swell toward the centre, from 0 (even) to 1 (peaks in the middle, flat at the sides).
`flow`	number	`0.8`	Speed the text drifts along its line, in em per second. Negative values drift the other way.
`alternate`	boolean	`false`	Neighbouring lines drift in opposite directions.
`fog`	number	`0.6`	How quickly distant lines fade, from 0 to 3.
`interactive`	boolean	`true`	Respond to the pointer.
`hoverFocus`	boolean	`true`	The lens racks focus to follow the pointer: the lines at the pointer's depth turn crisp while nearer and farther lines soften, then focus eases back to focusDepth when the pointer leaves.
`focusDepth`	number	`0.3`	Where the lens rests, from 0 (the nearest line) to 1 (the horizon).
`depthOfField`	number	`0.7`	How soft the out-of-focus lines get, from 0 (everything sharp) to 1.
`focusRange`	number	`0.14`	Depth of the sharp band around the focus, as a fraction of the sea.
`clickStrum`	boolean	`true`	Clicking strums the lines: a soft ripple runs along each one, spreading out from the line you clicked.
`strumStrength`	number	`1`	Height of the strum ripple, from 0 to 3.
`tension`	number	`1`	How fast a strum ripple runs along the lines.
`sustain`	number	`1.6`	Seconds a strummed line keeps ringing.
`paused`	boolean	`false`	Freeze the sea. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution scale from 0.25 to 1.
`ref`	{ strum }	`—`	strum(x, y) strums the lines from a point given as fractions of the width and height.
`children`	ReactNode	`—`	Content placed over the sea.
`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

The phrase repeated along every line of the sea.

Default"FORM FOLLOWS FEELING ·"

colors[string, string]

Colour of the text on the crests and nearby, and colour it fades to in the troughs and the distance, blended in OKLab.

Default["#FFFFFF", "#7C5CFF"]

backgroundColorstring

Colour of the water between the lines. Nearer crests hide the lines behind them in this colour.

Default"#0A0A0A"

mode"auto" | "glow" | "ink"

glow lets bright crests burn toward white on dark backgrounds; ink keeps colours true for light ones. auto picks from the background.

Default"auto"

fontFamilystring

Font for the lettering. Leave unset to use the page font.

Defaultinherited

fontWeightnumber

Font weight.

Default500

letterSpacingnumber

Letter spacing in em.

Default0.08

glyphSizenumber

Size of the nearest line of text, in pixels. Lines further away get smaller.

Default13

rowsnumber

Number of lines of text, from 2 to 64.

Default30

perspectivenumber

Depth of the view, from 0 (a flat stack of lines, like a ridgeline chart) to 1 (a deep sea running to the horizon).

Default0.55

tiltnumber

How steeply you look down at the sea, in degrees.

Default24

horizonnumber

Where the furthest line sits, as a fraction of the height from the top. Leaves room for a headline above.

Default0.36

amplitudenumber

Height of the swell, measured in line spacings.

Default1.6

wavelengthnumber

Length of the swell relative to the width of the frame.

Default0.7

speednumber

Time scale for the swell.

Default1

directionnumber

Direction the swell travels, in degrees. 0 rolls toward you.

Default0

sharpnessnumber

How peaked the crests are, from 0 (rounded) to 1 (sharp).

Default0.5

envelopenumber

Gathers the swell toward the centre, from 0 (even) to 1 (peaks in the middle, flat at the sides).

Default0

flownumber

Speed the text drifts along its line, in em per second. Negative values drift the other way.

Default0.8

alternateboolean

Neighbouring lines drift in opposite directions.

Defaultfalse

fognumber

How quickly distant lines fade, from 0 to 3.

Default0.6

interactiveboolean

Respond to the pointer.

Defaulttrue

hoverFocusboolean

The lens racks focus to follow the pointer: the lines at the pointer's depth turn crisp while nearer and farther lines soften, then focus eases back to focusDepth when the pointer leaves.

Defaulttrue

focusDepthnumber

Where the lens rests, from 0 (the nearest line) to 1 (the horizon).

Default0.3

depthOfFieldnumber

How soft the out-of-focus lines get, from 0 (everything sharp) to 1.

Default0.7

focusRangenumber

Depth of the sharp band around the focus, as a fraction of the sea.

Default0.14

clickStrumboolean

Clicking strums the lines: a soft ripple runs along each one, spreading out from the line you clicked.

Defaulttrue

strumStrengthnumber

Height of the strum ripple, from 0 to 3.

Default1

tensionnumber

How fast a strum ripple runs along the lines.

Default1

sustainnumber

Seconds a strummed line keeps ringing.

Default1.6

pausedboolean

Freeze the sea. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1.

Default1

ref{ strum }

strum(x, y) strums the lines from a point given as fractions of the width and height.

Default—

childrenReactNode

Content placed over the sea.

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

"FORM FOLLOWS FEELING ·"

The phrase repeated along every line of the sea.

colors

[string, string]

["#FFFFFF", "#7C5CFF"]

Colour of the text on the crests and nearby, and colour it fades to in the troughs and the distance, blended in OKLab.

backgroundColor

string

"#0A0A0A"

Colour of the water between the lines. Nearer crests hide the lines behind them in this colour.

mode

"auto" | "glow" | "ink"

"auto"

glow lets bright crests burn toward white on dark backgrounds; ink keeps colours true for light ones. auto picks from the background.

fontFamily

string

inherited

Font for the lettering. Leave unset to use the page font.

fontWeight

number

500

Font weight.

letterSpacing

number

0.08

Letter spacing in em.

glyphSize

number

13

Size of the nearest line of text, in pixels. Lines further away get smaller.

rows

number

30

Number of lines of text, from 2 to 64.

perspective

number

0.55

Depth of the view, from 0 (a flat stack of lines, like a ridgeline chart) to 1 (a deep sea running to the horizon).

tilt

number

24

How steeply you look down at the sea, in degrees.

horizon

number

0.36

Where the furthest line sits, as a fraction of the height from the top. Leaves room for a headline above.

amplitude

number

1.6

Height of the swell, measured in line spacings.

wavelength

number

0.7

Length of the swell relative to the width of the frame.

speed

number

1

Time scale for the swell.

direction

number

0

Direction the swell travels, in degrees. 0 rolls toward you.

sharpness

number

0.5

How peaked the crests are, from 0 (rounded) to 1 (sharp).

envelope

number

0

Gathers the swell toward the centre, from 0 (even) to 1 (peaks in the middle, flat at the sides).

flow

number

0.8

Speed the text drifts along its line, in em per second. Negative values drift the other way.

alternate

boolean

false

Neighbouring lines drift in opposite directions.

fog

number

0.6

How quickly distant lines fade, from 0 to 3.

interactive

boolean

true

Respond to the pointer.

hoverFocus

boolean

true

The lens racks focus to follow the pointer: the lines at the pointer's depth turn crisp while nearer and farther lines soften, then focus eases back to focusDepth when the pointer leaves.

focusDepth

number

0.3

Where the lens rests, from 0 (the nearest line) to 1 (the horizon).

depthOfField

number

0.7

How soft the out-of-focus lines get, from 0 (everything sharp) to 1.

focusRange

number

0.14

Depth of the sharp band around the focus, as a fraction of the sea.

clickStrum

boolean

true

Clicking strums the lines: a soft ripple runs along each one, spreading out from the line you clicked.

strumStrength

number

1

Height of the strum ripple, from 0 to 3.

tension

number

1

How fast a strum ripple runs along the lines.

sustain

number

1.6

Seconds a strummed line keeps ringing.

paused

boolean

false

Freeze the sea. Reduced-motion users always get a still frame.

quality

number

1

Resolution scale from 0.25 to 1.

ref

{ strum }

—

strum(x, y) strums the lines from a point given as fractions of the width and height.

children

ReactNode

—

Content placed over the sea.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.