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