brushmark · p5.brush × rough-notation

animation engine:

Annotate the web with real brushes

brushmark draws animated, hand-painted annotations over ordinary DOM text — watercolor, graphite, marker and spray — while the text itself stays selectable, responsive CSS text.

→ React demo

Recipes — copy-paste code

Every card is a working annotate() call. The code you see is exactly what paints the preview beside it — copy it, drop in your own element, done.

Annotation types

Smart contour

The contour follows the actual union of the wrapped line boxes — resize the panel below and replay.

A smooth hand-drawn outline hugging every wrapped line of this paragraph, however the text happens to flow at this width.

Animation lab

The quick brown fox jumps over the lazy dog, then pauses to admire the wet paint drying on this very sentence before jumping again.

Responsive

Drag the handle — annotations re-measure, re-render at the new wrap, and keep their animation progress. Font size scales stroke weight.

Painted annotations that survive любой reflow: squeeze this panel and the highlight re-wraps with the text, line by line, without losing its place in the animation.

Sequencing & GSAP timelines

Three annotations adopted into one master timeline, then scrub it.

First we sketch the idea, then we paint over the details, and finally we cross out the doubts.

Watercolor & hatch — permutations

Watercolor washes (bleed, texture, opacity), shape fills, and hatching (distance, angle, randomness, hatch brush) — every combination is just config.

Watercolor highlight

Watercolor-filled shapes

Hatching

Combinations

Stress test — one WebGL context

0 annotations, ? WebGL context(s).