Letter Cascade

About this component

Letter Cascade

Short text whose characters arrive one by one out of a light blur, for eyebrows, labels and single words. The element keeps the whole string as its accessible name.

Usage

The import and the props worth knowing about, in one place.

import { Text3 } from "@/components/beste/component/text3";

<Text3
  as="p"
  text="Therapy and coaching, Lisbon"
  className="text-sm uppercase tracking-[0.25em] text-muted-foreground"
/>

<Text3 text="Altair" as="span" trigger="mount" stagger={0.05} className="font-serif text-6xl" />

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Usage
import { Text3 } from "@/components/beste/component/text3";

<Text3
  text="Therapy and coaching"
  as="p"
  className="px-6 text-center text-sm uppercase tracking-[0.25em] text-muted-foreground"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
text*stringShort text; every character arrives on its own
as"h1" | "h2" | "h3" | "p" | "span"
trigger"view" | "mount"
delaynumber
staggernumber
durationnumber
classNamestring

More Text components

View all Text

The fog lifts a little later each morning.

Fog Clearing

Text hidden behind fog that clears across it from left to right along one soft edge, so the words emerge in reading order without moving at all.

Roomtobreathe,andawayforward.

Word Stagger

Text that settles in one word at a time, each word rising a few pixels out of a soft blur. Plays on scroll by default, or immediately for heroes.

Letters Settling

A short word whose letters begin scattered and slightly turned, then drift home on a soft spring one after another, like type settling onto a page.

Roomtobreathe.

Turning Word

A sentence whose one word takes turns: each candidate blurs up into place as the last blurs out, on a timer that stops when reduced motion is preferred.

Typewriter

Text typed out one character at a time behind a thin caret that keeps a slow pulse once the line is finished. The element keeps the whole string as its accessible name.

No forms, no commitment, no need to know what you want yet. Forty minutes to see whether this feels like a place you could talk.

Soft Blur In

A paragraph or heading that arrives as one piece, rising a few pixels out of a soft blur when it scrolls into view. The quiet companion to the word stagger, for body copy and descriptions.