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.
The import and the props worth knowing about, in one place.
import { Text16 } from "@/components/beste/component/text16";
<h2 className="font-serif text-5xl">
A practice where you are <Text16 text="listened to" />, all the way through.
</h2>
<Text16 text="on purpose" highlightClassName="bg-primary/20" delay={0.6} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text16 } from "@/components/beste/component/text16";
<Text16
text="listened to"
className="font-serif text-2xl 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 |
|---|---|---|---|
text* | string | — | The phrase to highlight; render it inline inside a heading or a sentence |
trigger | "view" | "mount" | — | |
delay | number | — | |
duration | number | — | |
highlightClassName | string | — | The highlight surface, e.g. "bg-muted" (default) or "bg-primary/20" |
className | string | — |
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.
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.
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.
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.