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.
The import and the props worth knowing about, in one place.
import { Text6 } from "@/components/beste/component/text6";
<Text6
as="h2"
text="Come as you are."
speed={45} // ms per character
delay={200} // ms before the first one
caret // keep the caret after the last character
className="font-serif text-5xl"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text6 } from "@/components/beste/component/text6";
<Text6
text="Come as you are."
as="h2"
className="px-6 text-center font-serif text-2xl font-normal leading-[1.1] tracking-[-0.02em] text-foreground md:text-3xl"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The text; it is typed out character by character |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
trigger | "view" | "mount" | — | "view" (default) starts typing when scrolled into view; "mount" starts at once |
speed | number | — | Milliseconds per character |
delay | number | — | Milliseconds before the first character |
caret | boolean | — | Keep the caret blinking after the last character |
className | string | — |
Lines of text that rise into view out of their own clipped rows, one after another, the way a heading is unmasked line by line.
A word whose letters rise and fall on one slow, continuous swell, each a beat behind the last, like a line of type resting on water. Stays still when reduced motion is preferred.
Words that begin as soft, spread blots of ink, wide-set and out of focus, and dry into crisp, tightly set type one after another.
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.