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]"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
Progressrarelyfeelslikeprogresswhileitishappening.Sometimesitisshowingup.
import { Text5 } from "@/components/beste/component/text5";
<Text5
text="Progress rarely feels like progress while it is happening. Sometimes it is showing up."
className="max-w-xs px-6 text-center font-serif text-xl font-normal leading-[1.2] tracking-[-0.01em] text-foreground md:text-2xl"
/>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 | — |
An inline phrase that gets a soft highlight swept in behind it from the left when it scrolls into view, like a marker drawn across the words, without the text moving.
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.
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.
Large serif letters filled with a photograph that drifts slowly inside them as the page scrolls, the picture showing through the type.