Elastic Lettering

A headline you can grab, stretch and fling like an elastic band

elastic-lettering-tw

Customize

Text

Tension

Font Size

80px

Letter Spacing

-0.035em

Tension Tint

0.80

Tension

0.60

Stiffness

1.00

Bounce

0.62

Squash

0.50

Tilt

0.50

Reach

4.0em

Lift

0.50

Pluck Strength

1.00

ThrowablePluck On ClickHintInteractive

Props

Name	Type	Default	Description
`text`	string	`"Built to bounce back"`	The headline. Each line of a wrapped headline behaves as its own elastic band.
`as`	"span" \| "div" \| "p" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	`"span"`	Element to render. The full text stays readable to screen readers.
`fontSize`	number \| string	`"clamp(2.75rem, 8vw, 6.5rem)"`	Font size. Numbers are pixels; strings accept any CSS length.
`fontWeight`	number	`700`	Font weight. The font family is inherited from the page.
`letterSpacing`	string	`"-0.035em"`	Letter spacing as a CSS length.
`lineHeight`	number	`1.05`	Line height for wrapped headlines.
`align`	"left" \| "center" \| "right"	`"center"`	Text alignment.
`color`	string	`inherited`	Text colour. Leave unset to inherit from the page.
`tensionColor`	string	`"#B15CFF"`	Colour the letters warm toward while the band is stretched, blended in OKLab.
`tensionTint`	number	`0.8`	How far stretched letters shift toward tensionColor, from 0 (never) to 1.
`tension`	number	`0.6`	How strongly neighbours follow a pulled letter, from 0 (it moves alone) to 1 (the whole line comes with it).
`stiffness`	number	`1`	How hard letters spring back home, from 0.2 (slow, heavy) to 4 (snappy).
`bounce`	number	`0.62`	How much the line wobbles as it settles, from 0 (no overshoot) to 1 (jelly).
`reach`	number	`4`	Distance in em a letter follows the pointer freely. Pulling further meets growing resistance.
`squash`	number	`0.5`	How much fast-moving letters stretch along their motion, from 0 to 1.
`tilt`	number	`0.5`	How much letters lean to follow the curve of the band, from 0 (upright) to 1.
`lift`	number	`0.5`	How much a held letter grows as it is picked up, from 0 to 1.
`throwable`	boolean	`true`	Releasing mid-swipe flings the letter with the pointer's speed.
`pluckOnClick`	boolean	`true`	Clicking a letter without dragging plucks it, sending a ripple along the line.
`pluckStrength`	number	`1`	Strength of a pluck, from 0 to 3.
`hint`	boolean	`false`	Gently tug one letter the first time the headline scrolls into view, so visitors discover it is elastic.
`interactive`	boolean	`true`	Allow letters to be grabbed. Reduced-motion users can still drag, without wobble or flings.
`ref`	{ pluck }	`—`	pluck(index, strength) plucks a letter by its position in the text, or the middle letter when omitted.
`className`	string	`—`	Classes for the root element.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The headline. Each line of a wrapped headline behaves as its own elastic band.

Default"Built to bounce back"

as"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Element to render. The full text stays readable to screen readers.

Default"span"

fontSizenumber | string

Font size. Numbers are pixels; strings accept any CSS length.

Default"clamp(2.75rem, 8vw, 6.5rem)"

fontWeightnumber

Font weight. The font family is inherited from the page.

Default700

letterSpacingstring

Letter spacing as a CSS length.

Default"-0.035em"

lineHeightnumber

Line height for wrapped headlines.

Default1.05

align"left" | "center" | "right"

Text alignment.

Default"center"

colorstring

Text colour. Leave unset to inherit from the page.

Defaultinherited

tensionColorstring

Colour the letters warm toward while the band is stretched, blended in OKLab.

Default"#B15CFF"

tensionTintnumber

How far stretched letters shift toward tensionColor, from 0 (never) to 1.

Default0.8

tensionnumber

How strongly neighbours follow a pulled letter, from 0 (it moves alone) to 1 (the whole line comes with it).

Default0.6

stiffnessnumber

How hard letters spring back home, from 0.2 (slow, heavy) to 4 (snappy).

Default1

bouncenumber

How much the line wobbles as it settles, from 0 (no overshoot) to 1 (jelly).

Default0.62

reachnumber

Distance in em a letter follows the pointer freely. Pulling further meets growing resistance.

Default4

squashnumber

How much fast-moving letters stretch along their motion, from 0 to 1.

Default0.5

tiltnumber

How much letters lean to follow the curve of the band, from 0 (upright) to 1.

Default0.5

liftnumber

How much a held letter grows as it is picked up, from 0 to 1.

Default0.5

throwableboolean

Releasing mid-swipe flings the letter with the pointer's speed.

Defaulttrue

pluckOnClickboolean

Clicking a letter without dragging plucks it, sending a ripple along the line.

Defaulttrue

pluckStrengthnumber

Strength of a pluck, from 0 to 3.

Default1

hintboolean

Gently tug one letter the first time the headline scrolls into view, so visitors discover it is elastic.

Defaultfalse

interactiveboolean

Allow letters to be grabbed. Reduced-motion users can still drag, without wobble or flings.

Defaulttrue

ref{ pluck }

pluck(index, strength) plucks a letter by its position in the text, or the middle letter when omitted.

Default—

classNamestring

Classes for the root element.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"Built to bounce back"

The headline. Each line of a wrapped headline behaves as its own elastic band.

as

"span" | "div" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

"span"

Element to render. The full text stays readable to screen readers.

fontSize

number | string

"clamp(2.75rem, 8vw, 6.5rem)"

Font size. Numbers are pixels; strings accept any CSS length.

fontWeight

number

700

Font weight. The font family is inherited from the page.

letterSpacing

string

"-0.035em"

Letter spacing as a CSS length.

lineHeight

number

1.05

Line height for wrapped headlines.

align

"left" | "center" | "right"

"center"

Text alignment.

color

string

inherited

Text colour. Leave unset to inherit from the page.

tensionColor

string

"#B15CFF"

Colour the letters warm toward while the band is stretched, blended in OKLab.

tensionTint

number

0.8

How far stretched letters shift toward tensionColor, from 0 (never) to 1.

tension

number

0.6

How strongly neighbours follow a pulled letter, from 0 (it moves alone) to 1 (the whole line comes with it).

stiffness

number

1

How hard letters spring back home, from 0.2 (slow, heavy) to 4 (snappy).

bounce

number

0.62

How much the line wobbles as it settles, from 0 (no overshoot) to 1 (jelly).

reach

number

4

Distance in em a letter follows the pointer freely. Pulling further meets growing resistance.

squash

number

0.5

How much fast-moving letters stretch along their motion, from 0 to 1.

tilt

number

0.5

How much letters lean to follow the curve of the band, from 0 (upright) to 1.

lift

number

0.5

How much a held letter grows as it is picked up, from 0 to 1.

throwable

boolean

true

Releasing mid-swipe flings the letter with the pointer's speed.

pluckOnClick

boolean

true

Clicking a letter without dragging plucks it, sending a ripple along the line.

pluckStrength

number

1

Strength of a pluck, from 0 to 3.

hint

boolean

false

Gently tug one letter the first time the headline scrolls into view, so visitors discover it is elastic.

interactive

boolean

true

Allow letters to be grabbed. Reduced-motion users can still drag, without wobble or flings.

ref

{ pluck }

—

pluck(index, strength) plucks a letter by its position in the text, or the middle letter when omitted.

className

string

—

Classes for the root element.

style

CSSProperties

—

Inline styles for the root element.