Mesh Lettering

A headline cut from silk that ripples in a slow breeze and billows at your touch

mesh-lettering-tw

Customize

Text

Silk

Sheen

Sheen Amount

1.00

Gloss

0.60

Iridescence

0.50

Wind

1.00

Wind Angle

0°

Turbulence

0.50

Flow

1.00

Softness

0.60

Drag

0.50

Hold

0.50

Font Size

124px

Font Weight

800

Letter Spacing

-0.010em

Line Height

1.00

Light Angle

-35°

Light Drift

1.00

Gust Strength

1.00

Gust Radius

1.20

Intro Duration

1.8s

IntroClick GustInteractivePaused

Props

Name	Type	Default	Description
`text`	string	`"Feels like air"`	The headline. It wraps onto as many lines as it needs.
`colors`	[string, string]	`["#7B61FF", "#FFC4F5"]`	The colour of the silk, and the colour of its sheen: the highlights running along the folds and the tint the fabric turns at grazing angles.
`sheen`	number	`1`	Strength of the satin highlights, from 0 (matte) to 2.
`gloss`	number	`0.6`	Sharpness of the highlights, from 0 (soft, brushed) to 1 (crisp satin streaks).
`iridescence`	number	`0.5`	How strongly the silk shifts toward the sheen colour as its folds turn away from you, like shot silk, from 0 to 1.
`wind`	number	`1`	Strength of the breeze that keeps the silk billowing, from 0 (still air) to 3.
`windAngle`	number	`0`	Direction the breeze travels across the headline, in degrees. 0 runs left to right.
`turbulence`	number	`0.5`	How irregular the breeze is, from 0 (long, even swells) to 1 (gusty and uneven).
`flow`	number	`1`	Speed of the breeze.
`softness`	number	`0.6`	How easily the fabric folds, from 0 (stiff, like taffeta) to 1 (soft and drapey).
`drag`	number	`0.5`	Air resistance, from 0 (the silk keeps rippling after a gust) to 1 (it settles quickly).
`hold`	number	`0.5`	How firmly the silk is held in place, from 0 (billows freely) to 1 (barely leaves its resting shape).
`fontFamily`	string	`inherited`	Font for the headline. Leave unset to use the page font.
`fontWeight`	number	`800`	Font weight. Heavy weights show more of the fabric.
`fontSize`	number	`124`	Largest font size in pixels. The headline shrinks to fit the frame when it needs to.
`letterSpacing`	number	`-0.01`	Letter spacing in em.
`lineHeight`	number	`1`	Line height as a multiple of the font size.
`lightAngle`	number	`-35`	Direction the light comes from, in degrees. 0 is straight above, negative values come from the left.
`lightDrift`	number	`1`	Speed of the light slowly wandering over the folds. 0 holds it still.
`interactive`	boolean	`true`	Moving the pointer across the headline sends a soft gust through the silk, stronger the faster you move.
`gustStrength`	number	`1`	Strength of the gusts from the pointer, from 0 to 3.
`gustRadius`	number	`1.2`	Reach of each gust, as a multiple of the font size.
`clickGust`	boolean	`true`	Clicking or tapping puffs the silk up from underneath at that point.
`intro`	boolean	`true`	The silk lays itself down across the headline from the wind side, fading in along a soft, slanted edge and lifting slightly as it lands. It plays when the headline first comes into view and again whenever the text or font changes.
`introDuration`	number	`1.8`	Length of the intro in seconds.
`paused`	boolean	`false`	Freeze the silk in a draped pose. Reduced-motion users always get this still pose, without the intro.
`quality`	number	`1`	Resolution scale from 0.25 to 1.
`ref`	{ gust, replay }	`—`	gust(x, y, strength) puffs the silk up from a point given as fractions of the headline. replay() plays the intro again.
`children`	ReactNode	`—`	Content placed over the headline.
`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 headline. It wraps onto as many lines as it needs.

Default"Feels like air"

colors[string, string]

The colour of the silk, and the colour of its sheen: the highlights running along the folds and the tint the fabric turns at grazing angles.

Default["#7B61FF", "#FFC4F5"]

sheennumber

Strength of the satin highlights, from 0 (matte) to 2.

Default1

glossnumber

Sharpness of the highlights, from 0 (soft, brushed) to 1 (crisp satin streaks).

Default0.6

iridescencenumber

How strongly the silk shifts toward the sheen colour as its folds turn away from you, like shot silk, from 0 to 1.

Default0.5

windnumber

Strength of the breeze that keeps the silk billowing, from 0 (still air) to 3.

Default1

windAnglenumber

Direction the breeze travels across the headline, in degrees. 0 runs left to right.

Default0

turbulencenumber

How irregular the breeze is, from 0 (long, even swells) to 1 (gusty and uneven).

Default0.5

flownumber

Speed of the breeze.

Default1

softnessnumber

How easily the fabric folds, from 0 (stiff, like taffeta) to 1 (soft and drapey).

Default0.6

dragnumber

Air resistance, from 0 (the silk keeps rippling after a gust) to 1 (it settles quickly).

Default0.5

holdnumber

How firmly the silk is held in place, from 0 (billows freely) to 1 (barely leaves its resting shape).

Default0.5

fontFamilystring

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

Defaultinherited

fontWeightnumber

Font weight. Heavy weights show more of the fabric.

Default800

fontSizenumber

Largest font size in pixels. The headline shrinks to fit the frame when it needs to.

Default124

letterSpacingnumber

Letter spacing in em.

Default-0.01

lineHeightnumber

Line height as a multiple of the font size.

Default1

lightAnglenumber

Direction the light comes from, in degrees. 0 is straight above, negative values come from the left.

Default-35

lightDriftnumber

Speed of the light slowly wandering over the folds. 0 holds it still.

Default1

interactiveboolean

Moving the pointer across the headline sends a soft gust through the silk, stronger the faster you move.

Defaulttrue

gustStrengthnumber

Strength of the gusts from the pointer, from 0 to 3.

Default1

gustRadiusnumber

Reach of each gust, as a multiple of the font size.

Default1.2

clickGustboolean

Clicking or tapping puffs the silk up from underneath at that point.

Defaulttrue

introboolean

The silk lays itself down across the headline from the wind side, fading in along a soft, slanted edge and lifting slightly as it lands. It plays when the headline first comes into view and again whenever the text or font changes.

Defaulttrue

introDurationnumber

Length of the intro in seconds.

Default1.8

pausedboolean

Freeze the silk in a draped pose. Reduced-motion users always get this still pose, without the intro.

Defaultfalse

qualitynumber

Resolution scale from 0.25 to 1.

Default1

ref{ gust, replay }

gust(x, y, strength) puffs the silk up from a point given as fractions of the headline. replay() plays the intro again.

Default—

childrenReactNode

Content placed over the headline.

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

"Feels like air"

The headline. It wraps onto as many lines as it needs.

colors

[string, string]

["#7B61FF", "#FFC4F5"]

The colour of the silk, and the colour of its sheen: the highlights running along the folds and the tint the fabric turns at grazing angles.

sheen

number

1

Strength of the satin highlights, from 0 (matte) to 2.

gloss

number

0.6

Sharpness of the highlights, from 0 (soft, brushed) to 1 (crisp satin streaks).

iridescence

number

0.5

How strongly the silk shifts toward the sheen colour as its folds turn away from you, like shot silk, from 0 to 1.

wind

number

1

Strength of the breeze that keeps the silk billowing, from 0 (still air) to 3.

windAngle

number

0

Direction the breeze travels across the headline, in degrees. 0 runs left to right.

turbulence

number

0.5

How irregular the breeze is, from 0 (long, even swells) to 1 (gusty and uneven).

flow

number

1

Speed of the breeze.

softness

number

0.6

How easily the fabric folds, from 0 (stiff, like taffeta) to 1 (soft and drapey).

drag

number

0.5

Air resistance, from 0 (the silk keeps rippling after a gust) to 1 (it settles quickly).

hold

number

0.5

How firmly the silk is held in place, from 0 (billows freely) to 1 (barely leaves its resting shape).

fontFamily

string

inherited

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

fontWeight

number

800

Font weight. Heavy weights show more of the fabric.

fontSize

number

124

Largest font size in pixels. The headline shrinks to fit the frame when it needs to.

letterSpacing

number

-0.01

Letter spacing in em.

lineHeight

number

1

Line height as a multiple of the font size.

lightAngle

number

-35

Direction the light comes from, in degrees. 0 is straight above, negative values come from the left.

lightDrift

number

1

Speed of the light slowly wandering over the folds. 0 holds it still.

interactive

boolean

true

Moving the pointer across the headline sends a soft gust through the silk, stronger the faster you move.

gustStrength

number

1

Strength of the gusts from the pointer, from 0 to 3.

gustRadius

number

1.2

Reach of each gust, as a multiple of the font size.

clickGust

boolean

true

Clicking or tapping puffs the silk up from underneath at that point.

intro

boolean

true

introDuration

number

1.8

Length of the intro in seconds.

paused

boolean

false

Freeze the silk in a draped pose. Reduced-motion users always get this still pose, without the intro.

quality

number

1

Resolution scale from 0.25 to 1.

ref

{ gust, replay }

—

gust(x, y, strength) puffs the silk up from a point given as fractions of the headline. replay() plays the intro again.

children

ReactNode

—

Content placed over the headline.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.