Vapor Type

Words that condense out of vapor and drift away

vapor-type-tw

Customize

Words

Color

Vapor

Font Size

112px

Density

1.00

Particle Size

1.20px

Spread

1.20

Rise

1.00

Turbulence

0.80

Diffusion

0.35

Grain

1.00

Stagger

0.80

Condense

1.8s

Hold

2.4s

Dissolve

2.0s

Overlap

0.60

Breath

1.00

Breath Radius

0.80

Recovery

1.2s

LoopStart On ViewInteractiveClick AdvancePause On HoverUppercasePaused

Props

Name	Type	Default	Description
`words`	string[]	`["Imagine", "Create", "Inspire"]`	Words or short phrases to cycle through. Each one condenses in place of the last.
`as`	"span" \| "div" \| "p" \| "h1" \| … \| "h6"	`"span"`	Element to render. The component inherits font, size and weight from its parent and reserves room for the longest word.
`align`	"start" \| "center" \| "end"	`"center"`	How shorter words sit inside the space reserved for the longest one.
`color`	string	`"currentColor"`	Colour of the lettering. Defaults to the surrounding text colour.
`vaporColor`	string	`"#B19EEF"`	Colour the particles fade to as they drift away from the letters. Pass "currentColor" for monochrome vapour.
`density`	number	`1`	Particles per square pixel of lettering. Higher values give finer, denser vapour.
`particleSize`	number	`1.2`	Size of each particle in CSS pixels.
`spread`	number	`1.2`	How far the vapour travels before it fades, in multiples of the font size.
`rise`	number	`1`	Upward drift of the vapour. Negative values let it sink like cold air.
`turbulence`	number	`0.8`	How strongly the air currents curl the vapour into wisps.
`diffusion`	number	`0.35`	How much individual particles scatter away from the wisps. Higher values read as dust.
`grain`	number	`1`	Size of the clumps the letters break into as they evaporate.
`sweep`	"left" \| "right" \| "center" \| "top" \| "scatter"	`"left"`	Where the evaporation starts and the next word lands first. Scatter breaks the word up in patches.
`stagger`	number	`0.8`	How spread out the sweep is. 0 transforms the whole word at once.
`condense`	number	`1.8`	Seconds a word takes to condense out of the vapour.
`hold`	number	`2.4`	Seconds each word stays fully formed.
`dissolve`	number	`2`	Seconds a word takes to evaporate.
`overlap`	number	`0.6`	How early the next word starts condensing, as a fraction of the dissolve. 0 waits for the vapour to clear.
`loop`	boolean	`true`	Keep cycling. When false the last word stays in place.
`startOnView`	boolean	`true`	Wait until the text scrolls into view before the first word condenses.
`interactive`	boolean	`true`	Let the pointer blow the letters into vapour as it passes. Touch scrolling is ignored.
`breath`	number	`1`	How strongly the pointer evaporates the letters. Faster movement blows harder.
`breathRadius`	number	`0.8`	Reach of the pointer, in multiples of the font size.
`recovery`	number	`1.2`	Seconds blown letters take to settle back into place.
`clickAdvance`	boolean	`true`	Clicking the text evaporates the word outward from the click and brings in the next one.
`pauseOnHover`	boolean	`true`	Keep the current word in place while the pointer rests on it, so it can be played with.
`area`	"parent" \| "self" \| "window"	`"parent"`	Where the pointer is followed: over the parent element, only over the text, or anywhere.
`paused`	boolean	`false`	Freezes the animation. Reduced-motion users always see the first word as plain text.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`onWordChange`	(index: number) => void	`—`	Called when a word starts condensing, with its index in words.
`ref`	{ next, replay }	`—`	Imperative controls: evaporate the current word now, or return to the first word.
`className`	string	`—`	Classes for the root element, for example font size and weight.
`style`	CSSProperties	`—`	Inline styles for the root element.

wordsstring[]

Words or short phrases to cycle through. Each one condenses in place of the last.

Default["Imagine", "Create", "Inspire"]

as"span" | "div" | "p" | "h1" | … | "h6"

Element to render. The component inherits font, size and weight from its parent and reserves room for the longest word.

Default"span"

align"start" | "center" | "end"

How shorter words sit inside the space reserved for the longest one.

Default"center"

colorstring

Colour of the lettering. Defaults to the surrounding text colour.

Default"currentColor"

vaporColorstring

Colour the particles fade to as they drift away from the letters. Pass "currentColor" for monochrome vapour.

Default"#B19EEF"

densitynumber

Particles per square pixel of lettering. Higher values give finer, denser vapour.

Default1

particleSizenumber

Size of each particle in CSS pixels.

Default1.2

spreadnumber

How far the vapour travels before it fades, in multiples of the font size.

Default1.2

risenumber

Upward drift of the vapour. Negative values let it sink like cold air.

Default1

turbulencenumber

How strongly the air currents curl the vapour into wisps.

Default0.8

diffusionnumber

How much individual particles scatter away from the wisps. Higher values read as dust.

Default0.35

grainnumber

Size of the clumps the letters break into as they evaporate.

Default1

sweep"left" | "right" | "center" | "top" | "scatter"

Where the evaporation starts and the next word lands first. Scatter breaks the word up in patches.

Default"left"

staggernumber

How spread out the sweep is. 0 transforms the whole word at once.

Default0.8

condensenumber

Seconds a word takes to condense out of the vapour.

Default1.8

holdnumber

Seconds each word stays fully formed.

Default2.4

dissolvenumber

Seconds a word takes to evaporate.

Default2

overlapnumber

How early the next word starts condensing, as a fraction of the dissolve. 0 waits for the vapour to clear.

Default0.6

loopboolean

Keep cycling. When false the last word stays in place.

Defaulttrue

startOnViewboolean

Wait until the text scrolls into view before the first word condenses.

Defaulttrue

interactiveboolean

Let the pointer blow the letters into vapour as it passes. Touch scrolling is ignored.

Defaulttrue

breathnumber

How strongly the pointer evaporates the letters. Faster movement blows harder.

Default1

breathRadiusnumber

Reach of the pointer, in multiples of the font size.

Default0.8

recoverynumber

Seconds blown letters take to settle back into place.

Default1.2

clickAdvanceboolean

Clicking the text evaporates the word outward from the click and brings in the next one.

Defaulttrue

pauseOnHoverboolean

Keep the current word in place while the pointer rests on it, so it can be played with.

Defaulttrue

area"parent" | "self" | "window"

Where the pointer is followed: over the parent element, only over the text, or anywhere.

Default"parent"

pausedboolean

Freezes the animation. Reduced-motion users always see the first word as plain text.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

onWordChange(index: number) => void

Called when a word starts condensing, with its index in words.

Default—

ref{ next, replay }

Imperative controls: evaporate the current word now, or return to the first word.

Default—

classNamestring

Classes for the root element, for example font size and weight.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

words

string[]

["Imagine", "Create", "Inspire"]

Words or short phrases to cycle through. Each one condenses in place of the last.

as

"span" | "div" | "p" | "h1" | … | "h6"

"span"

Element to render. The component inherits font, size and weight from its parent and reserves room for the longest word.

align

"start" | "center" | "end"

"center"

How shorter words sit inside the space reserved for the longest one.

color

string

"currentColor"

Colour of the lettering. Defaults to the surrounding text colour.

vaporColor

string

"#B19EEF"

Colour the particles fade to as they drift away from the letters. Pass "currentColor" for monochrome vapour.

density

number

1

Particles per square pixel of lettering. Higher values give finer, denser vapour.

particleSize

number

1.2

Size of each particle in CSS pixels.

spread

number

1.2

How far the vapour travels before it fades, in multiples of the font size.

rise

number

1

Upward drift of the vapour. Negative values let it sink like cold air.

turbulence

number

0.8

How strongly the air currents curl the vapour into wisps.

diffusion

number

0.35

How much individual particles scatter away from the wisps. Higher values read as dust.

grain

number

1

Size of the clumps the letters break into as they evaporate.

sweep

"left" | "right" | "center" | "top" | "scatter"

"left"

Where the evaporation starts and the next word lands first. Scatter breaks the word up in patches.

stagger

number

0.8

How spread out the sweep is. 0 transforms the whole word at once.

condense

number

1.8

Seconds a word takes to condense out of the vapour.

hold

number

2.4

Seconds each word stays fully formed.

dissolve

number

2

Seconds a word takes to evaporate.

overlap

number

0.6

How early the next word starts condensing, as a fraction of the dissolve. 0 waits for the vapour to clear.

loop

boolean

true

Keep cycling. When false the last word stays in place.

startOnView

boolean

true

Wait until the text scrolls into view before the first word condenses.

interactive

boolean

true

Let the pointer blow the letters into vapour as it passes. Touch scrolling is ignored.

breath

number

1

How strongly the pointer evaporates the letters. Faster movement blows harder.

breathRadius

number

0.8

Reach of the pointer, in multiples of the font size.

recovery

number

1.2

Seconds blown letters take to settle back into place.

clickAdvance

boolean

true

Clicking the text evaporates the word outward from the click and brings in the next one.

pauseOnHover

boolean

true

Keep the current word in place while the pointer rests on it, so it can be played with.

area

"parent" | "self" | "window"

"parent"

Where the pointer is followed: over the parent element, only over the text, or anywhere.

paused

boolean

false

Freezes the animation. Reduced-motion users always see the first word as plain text.

dpr

number

2

Maximum device pixel ratio for the canvas.

onWordChange

(index: number) => void

—

Called when a word starts condensing, with its index in words.

ref

{ next, replay }

—

Imperative controls: evaporate the current word now, or return to the first word.

className

string

—

Classes for the root element, for example font size and weight.

style

CSSProperties

—

Inline styles for the root element.