Hand-Drawn Annotation Card — Rough Notation Snippet

Bolding a phrase says "this matters." Drawing a wobbly circle around it by hand says "this is the bit I would have pointed at if we were in the same room." That difference in tone is why hand-drawn annotation has become a signature of well-designed marketing pages — and why faking it with CSS never quite lands.

This snippet uses rough-notation, a tiny library built on top of Rough.js, which generates genuinely irregular SVG paths using the same algorithms that make hand-drawn diagrams look hand-drawn. Every stroke is procedurally imperfect. Reload the page and the wobble is different, because the paths are regenerated rather than replayed from a fixed asset.

Markup drives the annotations

The critical design decision is that nothing is hard-coded in JavaScript. Every annotated phrase declares its own treatment as data attributes directly in the HTML:

<span data-annot="highlight" data-color="#fde68a">cut time-to-first-value by 63%</span>

The script queries [data-annot], maps over the results, and reads el.dataset.annot and el.dataset.color to configure each annotation. That means a copywriter can add, remove, or restyle emphasis by editing the sentence — no JS changes at all. The snippet demonstrates five of the six available types: highlight, strike-through, circle, underline, and box (the sixth, bracket, works identically).

Per-type configuration, and why highlight is special

The options object is not uniform across types, and getting this wrong is what makes most implementations look off:

strokeWidth: el.dataset.annot === 'highlight' ? 12 : 2

A highlight simulates a marker pen — it needs a very wide stroke (12) to cover the text's x-height, and rough-notation automatically inserts it behind the text rather than in front, so the words stay readable through the ink. Every other type is a thin pen line (2) drawn over the text. Using stroke width 2 for a highlight produces a thin stripe through the middle of the words; using 12 for an underline produces an unreadable smear.

Padding is likewise conditional. A box needs breathing room (6) or the rectangle crowds the letters, while an underline sits better tight to the baseline (3).

iterations: 2 means each stroke is drawn twice with different randomization — the way a person naturally goes over a circle a second time. One iteration looks tentative; three looks scribbled.

Sequencing with annotationGroup

Showing five annotations at once is visual noise. RoughNotation.annotationGroup(annotations) wraps them into a group whose show() plays them in array order, one after another, each waiting for the previous to finish. Since the array comes from querySelectorAll, that order is document order — so the annotations appear in exactly the sequence a reader encounters them. The effect reads as someone marking up the paragraph as they read it aloud.

Playing on scroll, exactly once

An IntersectionObserver with threshold: 0.4 waits until 40% of the card is visible before calling group.show(). The played boolean guard is what keeps it from restarting every time the card re-enters the viewport — without it, scrolling up and down retriggers the whole sequence repeatedly, which is the single most irritating way to ship this effect.

The replay gotcha

The replay button cannot simply call show() again — the annotations are already shown, so nothing happens. It must hide() first, and crucially, re-show on the next animation frame:

group.hide(); requestAnimationFrame(function () { group.show(); });

hide() removes the generated SVG elements synchronously. Calling show() immediately afterward in the same tick can have the browser coalesce the removal and re-insertion, so the paths appear fully drawn with no animation. Deferring by one frame guarantees the browser registers the removal first, and the strokes draw from zero length again.

Reusing it

Wrap any phrase in a span with data-annot and data-color and it joins the sequence automatically. multiline: true is already set, so annotations survive text wrapping and reflow correctly on mobile — a wrapped highlight becomes two ink strokes rather than one impossibly wide box. It sits naturally beside a testimonial card as its more opinionated cousin, or a pull quote when the emphasis is the whole point.