# rough-stuff/rough-notation

Create and animate hand-drawn annotations on a web page

Repository: https://github.com/rough-stuff/rough-notation
Canonical: https://ross.abutalabs.com/products/rough-notation
Homepage: https://roughnotation.com/
Language: TypeScript
License: MIT
License Family: permissive
Last push: 2024-03-18T05:16:12+00:00

## Health v2 (maintenance only)
Score: 32/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 0, release rhythm 35, longevity 100
- inputs: {"age_days": 2291, "days_push": 898, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_releases
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 9680, forks 236 (observed 2026-08-28T04:10:36.770343+00:00)

## What it is
A small (3.8kb gzipped) JavaScript library for creating and animating hand-drawn style annotations on web page elements, built on RoughJS. It supports multiple annotation styles like underline, box, circle, highlight, strike-through, crossed-off, and brackets, with configurable animation and grouping.

## Use cases
- add hand-drawn underline or highlight effects to text on a webpage
- animate annotations on page elements for tutorials or demos
- draw sketchy circles and boxes around UI elements to draw attention
- create sequenced annotation animations with annotation groups
- add highlighter and strike-through effects to inline content
- annotate multi-line inline content with hand-drawn marks

## When to choose
- you want a lightweight, dependency-light way to add sketchy annotation effects to web pages
- you need animated, hand-drawn visual emphasis for tutorials, onboarding, or presentations
- you want multiple annotation styles (underline, box, circle, highlight, brackets) with sequencing support

## When to avoid
- you need precise, non-sketchy geometric overlays or complex diagramming
- you are not working in a browser/DOM environment
- you need annotations that persist as editable document content rather than visual overlays

## Facets
- artifact type: library
- maturity: stable
- function: animation, ui-components, graphics
- domain: frontend, web-development, web-design
- platform: browser
- tags: hand-drawn, annotations, roughjs, svg, typescript, sketchy-styles, lightweight, javascript, web

## Member repositories
- rough-stuff/rough-notation (main) score 32

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:10:36.770343+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:21:16.900084+00:00, confidence not recorded.
  - readme: https://github.com/rough-stuff/rough-notation (fetched 2026-08-28T04:10:36.770343+00:00, sha 0d52b2fa11de)
  - homepage: https://roughnotation.com/ (fetched 2026-08-29T08:21:23.173551+00:00, sha 2e1499edeacd)
- Data as of 2026-08-30T08:39:29.467469+00:00.