Scribble draws a hand-drawn stroke around any word when it scrolls into view, animating the SVG path as if someone marked it with a marker pen. Choose a circle, underline, box, or highlight, and pick the ink color. Built with React and Tailwind CSS. Perfect for emphasizing a single word in a heading, sketch themed landing pages, and editorial layouts that want a human touch.
Installation
Examples
Circle
Custom Color
Pass stroke and strokeWidth to pick your own pen.
Usage
import { ScribbleCircle } from "@/components/ui/scribble";<h1>
Stream every <ScribbleCircle word="Episode" /> the same hour it airs
</h1>Pick a different look with variant:
<ScribbleCircle word="underline" variant="underline" />
<ScribbleCircle word="box" variant="box" />
<ScribbleCircle word="highlight" variant="highlight" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
word | string | Required | The word to scribble around. |
variant | "circle" | "underline" | "box" | "highlight" | "circle" | Scribble shape. |
stroke | string | "#FACC15" | Pen color (any CSS color). |
strokeWidth | number | 3 | Pen width in pixels (not on highlight). |
className | string | "" | Extra classes on the wrapping span. |