简体中文
EnglishWhat is RoughNotation?
Updated
RoughNotation is a small JavaScript library that creates and animates hand-drawn annotations on a web page. You use it when you want to visually emphasize a piece of content — a word, a link, a heading, or a whole paragraph — with a sketchy, hand-drawn look instead of a plain CSS border or background. It works by wrapping or targeting an element and applying one of several built-in annotation styles, which can appear instantly or animate in when you call show.
Annotation styles it provides
Based on the library's documentation, RoughNotation ships with these annotation types:
| Style | What it draws |
|---|---|
| Underline | A sketchy underline below an element |
| Box | A box around the element |
| Circle | A circle around the element |
| Highlight | A highlight effect, as if marked by a highlighter |
| Strike-Through | A hand-drawn line through an element |
| Crossed-Off | A crossed-off effect, used to symbolize rejection |
| Brackets | A hand-drawn bracket around a block on one or multiple sides |
What makes it useful
- Hand-drawn look. The annotations are sketchy rather than geometric, which suits designs that want a casual, editorial, or notebook feel.
- Animation is optional. Annotations can animate in, or you can skip animation entirely — the annotation just shows up when
showis called. - Multiple lines. It can annotate inline content that spans multiple lines, so it isn't limited to a single short word.
- Ordered animation with groups. You can create an annotation group by passing a list of annotations to it. When
showis called on the group, the annotations animate in order, which is useful for walking a reader through several points. - Configurable styling. Properties such as color, strokeWidth, and animation duration can be configured per annotation.
When to reach for it
Use RoughNotation when the emphasis itself is part of the message — for example, circling a key term in a tutorial, highlighting a phrase in a quote, or crossing out an option you're ruling out. If you only need a static, precise border or background, plain CSS is simpler and lighter. If you need the annotation to draw attention in sequence, the annotation-group feature is the reason to pick this library over a static style.
Where to get it
The code and documentation are available on GitHub, and the project can be sponsored. The maintainer can be reached on Twitter at @preetster.