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
/>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) |