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.
The import and the props worth knowing about, in one place.
import { Text5 } from "@/components/beste/component/text5";
<Text5
as="p"
text="Progress rarely feels like progress while it is happening. Sometimes it is showing up."
dim={0.2} // opacity before the reader reaches a word
className="font-serif text-5xl leading-[1.15]"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Scroll the page | Words brighten in reading order as the passage crosses the viewport, and dim again on the way back. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | A longer passage; words brighten in reading order as the passage scrolls through the viewport |
as | "h2" | "h3" | "p" | "blockquote" | — | |
dim | number | — | Opacity of a word before the reader reaches it |
className | string | — |