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} />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 | — |