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