Smoke Type

A headline that condenses out of drifting smoke, letter by letter

smoke-type-tw

Customize

Text

Smoke

Font Size

84px

Duration

0.90s

Stagger

0.11s

Rise

1.00em

Turbulence

1.00

Softness

1.00

Density

1.00

Speed

1.00

VisibleReplay On Hover

Props

Name	Type	Default	Description
`text`	string	`"Out of thin air"`	The headline. It stays real, selectable text; the smoke is drawn behind it.
`as`	"span" \| "div" \| "p" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	`"span"`	Element to render.
`fontSize`	number \| string	`"clamp(2.75rem, 8vw, 6.5rem)"`	Font size. Numbers are pixels; strings accept any CSS length.
`fontWeight`	number	`600`	Font weight. The font family is inherited from the page.
`letterSpacing`	string	`"-0.035em"`	Letter spacing as a CSS length.
`lineHeight`	number	`1.1`	Line height for wrapped headlines. Each line condenses in turn.
`align`	"left" \| "center" \| "right"	`"center"`	Text alignment.
`color`	string	`inherited`	Colour of the finished letters. Leave unset to inherit from the page.
`smokeColor`	string	`"#B19EEF"`	Colour of the smoke. Letters shift from this colour to their own as they settle.
`trigger`	"view" \| "mount" \| "manual"	`"view"`	When the first reveal plays: when the headline scrolls into view, as soon as it mounts, or only when visible becomes true.
`visible`	boolean	`true`	Set to false to dissolve the headline into rising smoke, and back to true to condense it again.
`direction`	"left" \| "right" \| "center" \| "edges" \| "random"	`"left"`	Order the letters condense in.
`delay`	number	`0.15`	Seconds before the reveal starts.
`duration`	number	`0.9`	Seconds each letter takes to condense.
`stagger`	number	`0.11`	Seconds between one letter and the next.
`rise`	number	`1`	How far the smoke drifts up into place, in em.
`turbulence`	number	`1`	How much the smoke swirls on its way, from 0 (straight) to 3.
`softness`	number	`1`	How diffuse the smoke is before it condenses.
`density`	number	`1`	Opacity of the smoke, from 0 to 3.
`speed`	number	`1`	Time scale for the whole effect.
`replayOnHover`	boolean	`false`	Replay the reveal when the pointer enters, sweeping in from the side it came from.
`quality`	number	`1`	Resolution scale for the smoke, from 0.25 to 1.
`onComplete`	() => void	`—`	Called when a reveal finishes.
`ref`	{ replay, condense, dissolve }	`—`	Play the reveal again, or condense and dissolve the headline from code.
`className`	string	`—`	Classes for the root element.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The headline. It stays real, selectable text; the smoke is drawn behind it.

Default"Out of thin air"

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

Element to render.

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.

Default600

letterSpacingstring

Letter spacing as a CSS length.

Default"-0.035em"

lineHeightnumber

Line height for wrapped headlines. Each line condenses in turn.

Default1.1

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

Text alignment.

Default"center"

colorstring

Colour of the finished letters. Leave unset to inherit from the page.

Defaultinherited

smokeColorstring

Colour of the smoke. Letters shift from this colour to their own as they settle.

Default"#B19EEF"

trigger"view" | "mount" | "manual"

When the first reveal plays: when the headline scrolls into view, as soon as it mounts, or only when visible becomes true.

Default"view"

visibleboolean

Set to false to dissolve the headline into rising smoke, and back to true to condense it again.

Defaulttrue

direction"left" | "right" | "center" | "edges" | "random"

Order the letters condense in.

Default"left"

delaynumber

Seconds before the reveal starts.

Default0.15

durationnumber

Seconds each letter takes to condense.

Default0.9

staggernumber

Seconds between one letter and the next.

Default0.11

risenumber

How far the smoke drifts up into place, in em.

Default1

turbulencenumber

How much the smoke swirls on its way, from 0 (straight) to 3.

Default1

softnessnumber

How diffuse the smoke is before it condenses.

Default1

densitynumber

Opacity of the smoke, from 0 to 3.

Default1

speednumber

Time scale for the whole effect.

Default1

replayOnHoverboolean

Replay the reveal when the pointer enters, sweeping in from the side it came from.

Defaultfalse

qualitynumber

Resolution scale for the smoke, from 0.25 to 1.

Default1

onComplete() => void

Called when a reveal finishes.

Default—

ref{ replay, condense, dissolve }

Play the reveal again, or condense and dissolve the headline from code.

Default—

classNamestring

Classes for the root element.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"Out of thin air"

The headline. It stays real, selectable text; the smoke is drawn behind it.

as

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

"span"

Element to render.

fontSize

number | string

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

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

fontWeight

number

600

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

letterSpacing

string

"-0.035em"

Letter spacing as a CSS length.

lineHeight

number

1.1

Line height for wrapped headlines. Each line condenses in turn.

align

"left" | "center" | "right"

"center"

Text alignment.

color

string

inherited

Colour of the finished letters. Leave unset to inherit from the page.

smokeColor

string

"#B19EEF"

Colour of the smoke. Letters shift from this colour to their own as they settle.

trigger

"view" | "mount" | "manual"

"view"

When the first reveal plays: when the headline scrolls into view, as soon as it mounts, or only when visible becomes true.

visible

boolean

true

Set to false to dissolve the headline into rising smoke, and back to true to condense it again.

direction

"left" | "right" | "center" | "edges" | "random"

"left"

Order the letters condense in.

delay

number

0.15

Seconds before the reveal starts.

duration

number

0.9

Seconds each letter takes to condense.

stagger

number

0.11

Seconds between one letter and the next.

rise

number

1

How far the smoke drifts up into place, in em.

turbulence

number

1

How much the smoke swirls on its way, from 0 (straight) to 3.

softness

number

1

How diffuse the smoke is before it condenses.

density

number

1

Opacity of the smoke, from 0 to 3.

speed

number

1

Time scale for the whole effect.

replayOnHover

boolean

false

Replay the reveal when the pointer enters, sweeping in from the side it came from.

quality

number

1

Resolution scale for the smoke, from 0.25 to 1.

onComplete

() => void

—

Called when a reveal finishes.

ref

{ replay, condense, dissolve }

—

Play the reveal again, or condense and dissolve the headline from code.

className

string

—

Classes for the root element.

style

CSSProperties

—

Inline styles for the root element.