Components•Stroke draw type
Components•Stroke draw type
Stroke draw type
Outline type that draws itself with a small glowing pen tip, then fills from below like liquid rising. Hover drains the fill back down, and the liquid hangs on the letter tops in beads before it lets go.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/stroke-draw-typeHow to use
import { StrokeDrawType } from "@/components/bjork-ui/text/stroke-draw-type";<StrokeDrawType text="Signature" trigger="in-view" // "mount" | "in-view" | "hover" | "loop" strokeWidth={1.6} duration={1.5} stagger={0.11} drainOnHover/>
Signature
Hover to drain the fill.