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.
The import and the props worth knowing about, in one place.
import { Text2 } from "@/components/beste/component/text2";
<Text2
as="h2"
lines={["Nothing changes all at once.", "Everything changes a little at a time."]}
className="font-serif text-5xl leading-[1.05]"
/>
<Text2
as="h1"
lines={["Come as you are.", "Stay as long as it takes."]}
trigger="mount"
stagger={0.18}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
lines* | string[] | — | One entry per line; each line rises out of its own clipped row |
as | "h1" | "h2" | "h3" | "p" | "blockquote" | "div" | — | |
trigger | "view" | "mount" | — | |
delay | number | — | |
stagger | number | — | |
duration | number | — | |
className | string | — |