RoughAnnotation
Hand-drawn underlines, circles, boxes, and highlights that draw in.
Every mark type
Set type to one of seven hand-drawn marks.
Highlight across lines
Set multiline to draw one mark for each line of wrapped text.
"We replaced four tools with PostHog. Now every team looks at the same numbers, from the same events, in the same place."
Stroke, passes, and padding
Tune the line weight, the number of pen passes, and the space around the text.
A sequence with delays
Set delay in milliseconds to draw marks one after another.
Capture, analyze, and ship.
Controlled
Set show to draw or remove the mark from state. onComplete runs when the draw ends.
Flags let you roll out to 5% of users first.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Pass a brand color name. Lines use the full color. The highlight type uses a see-through tint of it, so the text stays readable. Gray follows the text color.
- The mark is decorative and screen readers skip it. Do not use it to carry meaning.
API
RoughAnnotation is a copy of components/Code/RoughAnnotation. It draws with the rough-notation library.
RoughAnnotation
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off' | 'bracket' | – | The mark to draw. |
| color | 'gray' | 'brand' | 'blue' | 'cobalt' | 'coral' | 'corn-blue' | 'green' | 'lemon' | 'lime' | 'purple' | 'tangerine' | 'teal' | 'violet' | 'yellow' | 'gray' | A brand color for the mark. Gray uses the text color. |
| strokeWidth | number | 2 | The line weight in pixels. |
| animationDuration | number | 800 | The draw time in milliseconds. |
| padding | number | [number, number] | [number, number, number, number] | 0 | Space between the text and the mark, in pixels. |
| animateOnScroll | boolean | true | Draws the mark when the text scrolls into view. |
| delay | number | 0 | Wait time before the draw, in milliseconds. |
| show | boolean | – | Shows or hides the mark from state. |
| brackets | ('left' | 'right' | 'top' | 'bottom')[] | – | The sides that get a bracket when type is bracket. |
| iterations | number | 2 | Pen passes. More passes look rougher. |
| multiline | boolean | false | Draws one mark for each line. |
| className | string | – | Classes for the wrapper span. |
| onComplete | () => void | – | Runs when the draw ends. |