Hollow outlined text that fills with color in a left to right sweep on hover.
npx shadcn@latest add https://hyperblur.dev/r/stroke-text.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stroke-text.tsx.
import { StrokeText } from "@/components/hyperblur/stroke-text"
<StrokeText text="OUTLINE" strokeWidth={1.5} trigger="hover" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| strokeWidth | number | 1.5 | Outline width in pixels. |
| color | string | "#ffffff" | Outline color. |
| fill | string | same as color | Color the text fills with. Defaults to the outline color. |
| trigger | "hover" | "always" | "none" | "hover" | Fill on hover, keep it always filled, or stay hollow. |
| duration | number | 0.6 | Seconds for the fill sweep. |