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 import and the props worth knowing about, in one place.
import { Text8 } from "@/components/beste/component/text8";
<h2 className="font-serif text-5xl">
A practice where you are <Text8 text="listened to the end" />.
</h2>
<Text8
text="in the room or online"
offset={0.25} // gap under the text, in em
thickness={2} // line thickness in px
lineClassName="bg-primary"
delay={0.5}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text8 } from "@/components/beste/component/text8";
<Text8
text="listened to the end"
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 underline; render it inline inside a heading or a sentence |
trigger | "view" | "mount" | — | |
delay | number | — | Seconds before the line starts drawing |
duration | number | — | Seconds the line takes to draw |
offset | number | — | Gap between the text and the line, in em (default 0.18) |
thickness | number | — | Line thickness in pixels (default 1) |
lineClassName | string | — | Line colour, e.g. "bg-primary" (defaults to the text colour) |
className | string | — |
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.
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.
A single line of text that runs across its container without end, fading at both edges and pausing under the pointer. Small caps for announcements, tracked serif for statements.