Text

Char flip

A slot-machine accent: each letter carries a duplicate in a clipped box and hover flips them in alternating directions — odd letters down, even letters up. A display-link accent; use one per view.

text

string

Flip rig is aria-hidden; a sr-only copy carries the accessible text.

as

"h1" | "h2" | "h3" | "p" | "span"

Rendered element, default "span". Best at display sizes, uppercase.

Typed text

Typewriter with a hard-blinking block caret. A single string types once; an array cycles type–hold–delete. The mono sibling of the decode effect.

text

string | string[]

An array cycles; the sr-only copy is the first line.

speed

number = 45

Milliseconds per typed character.

deleteSpeed

number = 24

Milliseconds per deleted character.

pause

number = 900

Hold when a line completes.

caret

boolean = true

Hide the block caret with false.

loop

boolean?

Defaults to true for arrays, false for a single string.

Scaled text

A single-line display title that measures itself and scales to fill its container exactly — any viewport, any copy length. Resize the window to watch it refit.

children

ReactNode

Rendered nowrap and scaled via a top-left-anchored transform; wrapper height follows.

as

"div" | "h1" | "h2" | "h3" | "p"

Rendered element, default "div". Remeasures on resize and font load.

Letter reveal

Per-letter rise-and-reveal, triggered once on scroll — the wordmark treatment generalized. Words stay in nowrap chunks so lines only break at word boundaries.

text

string

Letters are aria-hidden; a sr-only copy carries the accessible name.

as

"h1" | "h2" | "h3" | "p" | "span"

Rendered element, default "span".

rise

string = "0.6em"

Rise distance, any CSS length — use vw values for display-scale wordmarks.

stagger

number = 50

Per-letter stagger in ms.

delay

number = 0

Lead-in before the first letter, in ms.

Related

Three text effects are documented elsewhere and not repeated here:

• DecodeText and MaskReveal — Motion
• DisplayDuet — Typography