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.
The import and the props worth knowing about, in one place.
import { Text1 } from "@/components/beste/component/text1";
<Text1
as="h2" // "h1" | "h2" | "h3" | "p" | "blockquote" | "span"
text="Room to breathe, and a way forward."
className="font-serif text-5xl"
/>
<Text1
as="h1"
text="A steady hour in an unsteady week."
trigger="mount" // play at once instead of on scroll
delay={0.3} // seconds before the first word
stagger={0.07} // seconds between words
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text1 } from "@/components/beste/component/text1";
<Text1
text="Room to breathe, and a way forward."
as="h2"
className="max-w-xs px-6 text-center font-serif text-2xl font-normal leading-[1.05] 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 split on spaces and each word settles in on its own |
as | "h1" | "h2" | "h3" | "p" | "blockquote" | "span" | — | Element to render |
trigger | "view" | "mount" | — | "view" (default) plays when scrolled into view; "mount" plays immediately, for heroes |
delay | number | — | Seconds before the first word starts |
stagger | number | — | Seconds between one word and the next |
duration | number | — | Seconds each word takes to settle |
className | string | — | Additional classes merged onto the element (size, family, colour) |
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.
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.
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.
A sentence that corrects itself: a line is drawn through the old word from left to right, and the better word settles in beside it out of a soft blur.
Progressrarelyfeelslikeprogresswhileitishappening.Sometimesitisshowingup.
A passage whose words brighten one after another in reading order as it scrolls through the viewport, and dim again on the way back, like a finger following the line.