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}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text2 } from "@/components/beste/component/text2";
<Text2
lines={["Nothing changes","all at once."]}
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 |
|---|---|---|---|
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 | — |
A single line of text that runs across its container without end, fading at both edges and pausing under the pointer. Small caps for announcements, tracked serif for statements.
The fog lifts a little later each morning.
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.
An inline phrase whose hairline underline draws itself in from the left when it scrolls into view. Drop it inside a heading or a sentence to mark the words that matter.
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.