Typography

Rough Notation

Animated hand-drawn annotations over inline text.

Live demorough-notation

This paragraph is highlighted, this part gets an underline, this word is circled, this has a box, and this one is crossed out.

Rough Notation draws imperfect, sketchy SVG annotations over any element — highlights, underlines, circles, boxes, strike-throughs, and arrows. Great for marketing copy and tutorials.

Install

npm i rough-notation

Snippet

import { annotate, annotationGroup } from "rough-notation";

const a1 = annotate(ref1.current, { type: "highlight", color: "#22d3ee" });
const a2 = annotate(ref2.current, { type: "underline", color: "#8b5cf6" });
const a3 = annotate(ref3.current, { type: "circle", color: "#f472b6" });

annotationGroup([a1, a2, a3]).show();