A wavy or straight underline that draws itself under the text on hover, focus or when it scrolls into view.
npx shadcn@latest add https://hyperblur.dev/r/text-underline-draw.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-underline-draw.tsx.
import { TextUnderlineDraw } from "@/components/hyperblur/text-underline-draw"
<TextUnderlineDraw text="Read the changelog" className="text-3xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to underline. Keep it on a single line. |
| variant | "wavy" | "straight" | "wavy" | Flowing wave or a clean rounded bar. |
| trigger | "hover" | "view" | "hover" | Draw on hover and keyboard focus, or when the text scrolls into view. |
| color | string | "#7fb3ff" | Color of the line. |
| thickness | number | 3 | Stroke thickness in pixels. |
| duration | number | 0.7 | Seconds the line takes to draw. |
| autoplay | boolean | true | With the hover trigger, draws and erases the line on a timer while nobody is hovering. Disabled under reduced motion. |
| once | boolean | true | With the view trigger, draws only the first time and keeps the line. |