Rougher Stuff
Useful software can still feel personal.
Keep the interface precise. Let the drawing carry attention and intent.
Expressive drawing tools for the web
Make interfaces feel human.
Precise geometry underneath. Deliberate, human marks on top. Build drawings, annotations, and connectors that stay useful as interfaces change.
01 / Principle
Precise underneath.
Expressive where it matters.
Rougher Stuff keeps geometry deterministic, then adds deliberate imperfection at the visual layer. The UI remains quiet so the output can speak.
02 / Packages
One stack, six focused layers.
Start with a single mark. Add routing, shared geometry, or timelines only when the composition needs them.
01 / roughjs
Expressive SVG and Canvas drawingdraw · retain · update
02 / perfect-arrows
Organic, layout-aware routingroute · attach · refresh
03 / rough-notation
Annotations and calloutshighlight · comment · erase
04 / markdown
Annotation syntax for documentsparse · theme · mount
05 / geometry
Shared geometric foundationspaths · bounds · transforms
06 / animation
Progress-driven timelinesplay · seek · reverse
03 / Composition
One interface. Shared geometry.
SVG, DOM, and connectors speaking the same visual language.
Project notes
Updated / 12 Aug
A clear system leaves room for a human signal.
The outer framework stays calm and exact. Emphasis is earned by the part that explains the idea.
04 / Continue
See the pattern, then change it.
05 / Quick start
Start with one useful mark.
Install a focused package, pass familiar inputs, and keep the result around to update or animate later.
Open documentationpnpm add @rougher-stuff/rough-notation
const note = annotate(target, {
type: 'highlight',
color: '#ebc54c',
seed: 43,
})
await note.show().finished