Architecture

Rougher Stuff separates what a shape means from how it is roughened, painted, rendered, and animated.

Data flow

nominal geometry
      ↓
rough compilation
      ↓
render plan
      ↓
SVG / Canvas surface
      ↓
progress + interaction

This boundary keeps an editable rectangle or path available after its sketch operations have been generated. Paint-only and transform-only changes can then avoid unnecessary geometry work.

Foundation packages

@rougher-stuff/geometry provides the canonical path representation, transforms, bounds, metrics, intersections, polygon operations, and hatching used by every higher layer.

@rougher-stuff/animation provides normalized progress. Controllers expose play, pause, reverse, seek, cancellation, events, and a completion promise without depending on browser path measurement.

Product packages

@rougher-stuff/roughjs compiles nominal shapes into rough operations and render plans. Its retained surfaces keep compiled nodes mounted for incremental updates.

@rougher-stuff/perfect-arrows creates routes and endpoint decorations without choosing a renderer. Rectangle-aware routes can attach to real bounds and oriented boxes.

@rougher-stuff/rough-notation resolves elements, ranges, collections, and virtual targets into annotation geometry. Shared viewport layers handle scrolling, resizing, connectors, and callout sequences.

Dependency direction

The dependency graph remains one-way:

animation ─────────────┐
geometry ──→ @rougher-stuff/roughjs   ├──→ rough-notation
    └─────→ perfect-arrows ─┘

Applications can start with any product package without adopting the entire stack.

Determinism

Pass a fixed, non-zero seed when visual output must be repeatable. The geometry and rendering layers preserve deterministic operation streams, which supports snapshots, retained updates, and synchronized animation.