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.
The import and the props worth knowing about, in one place.
import { Text4 } from "@/components/beste/component/text4";
<Text4
as="h1"
before="Room to"
words={["breathe.", "think.", "rest.", "begin again."]}
interval={2800} // ms per word
className="font-serif text-7xl"
wordClassName="text-muted-foreground"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text4 } from "@/components/beste/component/text4";
<Text4
before="Room to"
words={["breathe.","think.","rest.","begin again."]}
as="h2"
className="px-6 text-center font-serif text-2xl font-normal leading-[1.05] tracking-[-0.02em] text-foreground md:text-3xl"
wordClassName="text-muted-foreground"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
before | string | — | Printed before the turning word |
words* | string[] | — | Words that take turns |
after | string | — | Printed after the turning word |
interval | number | — | Milliseconds each word stays |
trigger | "view" | "mount" | — | "view" (default) settles the fixed words in when scrolled into view; "mount" plays at once |
as | "h1" | "h2" | "h3" | "p" | "span" | — | |
className | string | — | |
wordClassName | string | — | Classes for the turning word only, e.g. a muted colour |
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.
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.
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.