Show HN: RoughNotation – create and animate hand-drawn annotations on a web page (roughnotation.com)

Article summary

Rough Notation is a small JavaScript library that creates and animates hand-drawn annotations on a web page. The library uses RoughJS to achieve a hand-drawn look and feel, and allows for various annotation styles, animation duration, and delay configuration. The library is 3.8kb in size when gzipped and is available on GitHub. It can be used to create annotations such as underlines, boxes, circles, highlights, and more.

Main themes

• web development
• JavaScript libraries
• annotation tools
• user interface design
• web page customization
• collaborative editing

What commenters say

• The library is beautiful and well-done, and could be useful for adding emphasis to web pages.
• Some commenters think it would be great as a Chrome Extension or a tool for annotating screenshots of text.
• Others see potential for using it in online tutorials, presentations, or editing, to direct the reader's attention to specific parts of the content.
• A few commenters find the double pass animation distracting and think it should be configurable.
• There are suggestions for adding text to annotations, which could enable new use cases such as markup tools or collaborative annotation.
• Some commenters appreciate the library's potential for bringing a human touch to web pages, while others are skeptical about its usefulness.
• The library's creator is open to feedback and suggestions, and has considered adding new features such as text annotations.
• A few commenters are concerned that the library could be used to create annoying or distracting effects, such as excessive use of animations or poor design choices.