Stepwise UI

Circle Annotation

A hand-drawn circle scribbled around the text with generous inner padding, drawn on when scrolled into view. Built on rough.js so the loop is an authentic sketchy ellipse - never a perfect SVG oval.

Installation

npx stepwise-ui add circle-annotation

Depends on roughjsfor the hand-drawn geometry.

Every detail is intentional - nothing here is an accident.

import { CircleAnnotation } from '@/components/stepwise/circle-annotation'

// Scribbles a hand-drawn circle around the text when in view
Every detail is <CircleAnnotation color="#e11d48">intentional</CircleAnnotation>.

// More breathing room + slower draw
<CircleAnnotation color="#0284c7" padding={18} duration={1.4} delay={0.3}>
  reviewed
</CircleAnnotation>

Props

PropTypeDescription
children
React.ReactNode
The text (or nodes) to circle.
color
string
Tints text and stroke when set. Default currentColor.
thickness
number
Stroke width in px. Scales from font size when omitted.
roughness
number
Sketchiness (rough.js roughness). Default 1.6.
padding
number
Gap between text and the loop, px. Scales from font size when omitted (min 14).
duration
number
Draw-on duration in seconds. Default 1.25.
delay
number
Pause before the draw begins, in seconds. Default 0.25.
stagger
number
Delay between loops when doubleStroke is on. Default 0.2.
doubleStroke
boolean
Draw a second loop for the classic double-circled look. Default true.
replayInView
boolean
Replay the draw each time it scrolls into view. Default false.
className
string
Tailwind classes for font size, weight, and tracking.