ComponentsDraw
Outline draw
The outline draws itself, then fills.
Installation
$ npx shadcn@latest add @textlab/outline-drawNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { OutlineDraw } from "@/components/textlab/outline-draw/outline-draw";
<OutlineDraw as="h1" text="Draft" />Variants
draw-filldraw-onlyfill-sweepProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "draw-fill" | "draw-only" | "fill-sweep" | "draw-fill" | Trace then flood, keep the outline, or trace then fill left to right. |
| stroke | number | 0.018 | Outline width in em. |
| 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 | 1.6 | 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. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Big, single-line display words: names, product marks, numbers.
- Architectural and blueprint aesthetics.
Skip it
- Text that wraps; the SVG draws a single line.
- Small sizes where the outline is thinner than a pixel.
Accessibility and motion
Accessibility
- The SVG is decorative; the word is read from a hidden copy.
- An invisible copy holds the exact size so nothing shifts.
Motion
- All contours trace at once and finish together.
- The fill starts at 75% of the trace so the two overlap.
Reduced motion. Shows the final state: filled, or outlined for draw-only.
Performance
- One SVG text element; stroke-dashoffset and fill-opacity only.