ComponentsDraw
Underline draw
A hand-drawn underline sketches in.
Ship it today, not someday
Installation
$ npx shadcn@latest add @textlab/underline-drawNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { UnderlineDraw } from "@/components/textlab/underline-draw/underline-draw";
<h2>Ship <UnderlineDraw>today</UnderlineDraw>, not someday</h2>Variants
linewavescribbleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | – | The words to underline. |
| variant | "line" | "wave" | "scribble" | "line" | A confident curve, a squiggle, or a quick double pass. |
| color | string | var(--tl-accent) | Pen color. |
| thickness | number | 3 | Stroke width in px, constant at any size. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| duration | number | 0.6 (0.9 scribble) | Seconds each part takes. |
| ease | EaseName | [number, number, number, number] | "standard" | Easing token or cubic bezier. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Emphasising one word or phrase inside a headline.
- Friendly, human brands.
Skip it
- Links; people expect a real underline there.
- Several underlines in one paragraph.
Accessibility and motion
Accessibility
- The underline is decorative SVG; the words are real text.
- Emphasis is visual only; add <strong> or <em> if it matters semantically.
Motion
- Draws with the standard ease so the pen speeds up and settles like a real stroke.
Reduced motion. The underline is drawn from the start.
Performance
- One SVG path animated with pathLength.