Cipher Reveal

A headline that decodes out of scrambled characters

cipher-reveal-tw

Customize

Text

Scramble

Font Size

80px

Duration

1.40s

Scramble

0.45s

Rate

Scramble Opacity

0.42

Hover Radius

0.60em

Cycle PhrasesLoop

Props

Name	Type	Default	Description
`text`	string	`"Ideas into reality"`	The headline, set in the page's own font. Changing it decodes the new words in place.
`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.03em"`	Letter spacing as a CSS length.
`lineHeight`	number	`1.1`	Line height for wrapped headlines.
`align`	"left" \| "center" \| "right"	`"center"`	Text alignment.
`color`	string	`inherited`	Colour of the decoded text. Leave unset to inherit from the page.
`scrambleColor`	string	`text colour`	Colour of the characters while they are still scrambled. Leave unset for a monochrome decode.
`scrambleOpacity`	number	`0.42`	Opacity of the scrambled characters, from 0 to 1. They brighten toward full as each letter locks.
`charset`	string	`"auto"`	Characters used while scrambling. "auto" matches each letter with characters of the same case and a similar width. Any other string is used as-is. Every scrambled character is fitted to its letter's exact width, so the line never shifts.
`trigger`	"view" \| "mount" \| "manual"	`"view"`	When the first reveal plays: as the headline scrolls into view, on mount, or only through the ref.
`order`	"left" \| "right" \| "center" \| "random"	`"left"`	Order the letters decode in.
`from`	"blank" \| "scrambled"	`"blank"`	Start from nothing, with letters typed in as cipher, or from a fully scrambled line.
`duration`	number	`1.4`	Seconds for the whole headline to decode.
`scramble`	number	`0.45`	Seconds each letter scrambles before it locks.
`rate`	number	`14`	How many times per second a scrambled character changes.
`hover`	"trail" \| "replay" \| "none"	`"trail"`	trail re-encrypts the letters the pointer moves across, decoding them again behind it. replay decodes the whole headline again when the pointer enters.
`hoverRadius`	number	`0.6`	Reach of the hover trail, in em.
`loop`	boolean	`false`	Decode again every interval while the headline is on screen.
`interval`	number	`5`	Seconds between reveals when loop is on.
`onComplete`	() => void	`—`	Called when a reveal finishes.
`ref`	{ replay }	`—`	replay() decodes the headline again from code.
`className`	string	`—`	Classes for the root element.
`style`	CSSProperties	`—`	Inline styles for the root element.

textstring

The headline, set in the page's own font. Changing it decodes the new words in place.

Default"Ideas into reality"

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.03em"

lineHeightnumber

Line height for wrapped headlines.

Default1.1

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

Text alignment.

Default"center"

colorstring

Colour of the decoded text. Leave unset to inherit from the page.

Defaultinherited

scrambleColorstring

Colour of the characters while they are still scrambled. Leave unset for a monochrome decode.

Defaulttext colour

scrambleOpacitynumber

Opacity of the scrambled characters, from 0 to 1. They brighten toward full as each letter locks.

Default0.42

charsetstring

Characters used while scrambling. "auto" matches each letter with characters of the same case and a similar width. Any other string is used as-is. Every scrambled character is fitted to its letter's exact width, so the line never shifts.

Default"auto"

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

When the first reveal plays: as the headline scrolls into view, on mount, or only through the ref.

Default"view"

order"left" | "right" | "center" | "random"

Order the letters decode in.

Default"left"

from"blank" | "scrambled"

Start from nothing, with letters typed in as cipher, or from a fully scrambled line.

Default"blank"

durationnumber

Seconds for the whole headline to decode.

Default1.4

scramblenumber

Seconds each letter scrambles before it locks.

Default0.45

ratenumber

How many times per second a scrambled character changes.

Default14

hover"trail" | "replay" | "none"

trail re-encrypts the letters the pointer moves across, decoding them again behind it. replay decodes the whole headline again when the pointer enters.

Default"trail"

hoverRadiusnumber

Reach of the hover trail, in em.

Default0.6

loopboolean

Decode again every interval while the headline is on screen.

Defaultfalse

intervalnumber

Seconds between reveals when loop is on.

Default5

onComplete() => void

Called when a reveal finishes.

Default—

ref{ replay }

replay() decodes the headline again from code.

Default—

classNamestring

Classes for the root element.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

text

string

"Ideas into reality"

The headline, set in the page's own font. Changing it decodes the new words in place.

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.03em"

Letter spacing as a CSS length.

lineHeight

number

1.1

Line height for wrapped headlines.

align

"left" | "center" | "right"

"center"

Text alignment.

color

string

inherited

Colour of the decoded text. Leave unset to inherit from the page.

scrambleColor

string

text colour

Colour of the characters while they are still scrambled. Leave unset for a monochrome decode.

scrambleOpacity

number

0.42

Opacity of the scrambled characters, from 0 to 1. They brighten toward full as each letter locks.

charset

string

"auto"

trigger

"view" | "mount" | "manual"

"view"

When the first reveal plays: as the headline scrolls into view, on mount, or only through the ref.

order

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

"left"

Order the letters decode in.

from

"blank" | "scrambled"

"blank"

Start from nothing, with letters typed in as cipher, or from a fully scrambled line.

duration

number

1.4

Seconds for the whole headline to decode.

scramble

number

0.45

Seconds each letter scrambles before it locks.

rate

number

14

How many times per second a scrambled character changes.

hover

"trail" | "replay" | "none"

"trail"

trail re-encrypts the letters the pointer moves across, decoding them again behind it. replay decodes the whole headline again when the pointer enters.

hoverRadius

number

0.6

Reach of the hover trail, in em.

loop

boolean

false

Decode again every interval while the headline is on screen.

interval

number

5

Seconds between reveals when loop is on.

onComplete

() => void

—

Called when a reveal finishes.

ref

{ replay }

—

replay() decodes the headline again from code.

className

string

—

Classes for the root element.

style

CSSProperties

—

Inline styles for the root element.