Text Scribble

Hand-drawn scribble, squiggly underline, strike, circle, and box marks for text.

textscribbleunderlinestrike throughcircleannotationsvgtypography

Overview

Text Scribble is a React and Tailwind CSS scribble animation that sketches a hand drawn underline, squiggly underline, strike through, circle, or box onto words, in Next.js or any React app, with no dependencies. Each mark is an SVG stroke revealed by one stroke dashoffset transition, drawn in up to four rough passes. Lines follow wrapped text, while the circle and box loop the whole phrase and overshoot their start like a real pen. Marks refit on resize and font load and paint after hydration. Trigger on view or hover, or set drawn, and reduced motion draws instantly.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add text-scribble

Usage

Import TextScribble from @/components/wensity/text-scribble and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { TextScribble } from "@/components/wensity/text-scribble";
 2
 3export default function Example() {
 4  return (
 5    <p className="font-display text-2xl text-zinc-900 dark:text-zinc-100">
 6      I think wensity has the{" "}
 7      <TextScribble type="scribble">
 8        best components
 9      </TextScribble>{" "}
10      on the internet.
11    </p>
12  );
13}

Props

Prop	Type	Default	Description
`children`	React.ReactNode	-	The inline content to annotate.
`type`	"scribble" \| "underline" \| "strike-through" \| "circle" \| "box"	"scribble"	Annotation style. Scribble, underline and strike-through follow each wrapped line; circle and box loop the whole phrase.
`color`	string	chili (brand)	Stroke color. Defaults to the Wensity brand (chili).
`strokeWidth`	number	2	Stroke width in CSS pixels.
`duration`	number	0.9	Seconds for the draw-on.
`delay`	number	0	Seconds to wait before drawing.
`trigger`	"view" \| "hover" \| "mount"	"view"	When to draw. View draws once on-screen; hover draws and retracts.
`iterations`	number	2 (scribble) / 1	Sketch passes for the hand-drawn look, from 1 to 4.
`padding`	number	2	Extra px around the text before the mark is drawn.
`drawn`	boolean	-	Force the draw state. When omitted the trigger drives it; reduced motion always draws instantly.
`as`	keyof JSX.IntrinsicElements	"span"	Outer element tag.

Featured in React hero section components.