Annotations & callouts
Animated annotations and callout components
Drawn arrows, highlights, circles, labels, connectors, speech bubbles, and whiteboard marks for directing attention inside a scene.
Annotations explain what to look at without replacing the underlying scene. They work best as short, motivated gestures attached to a target.
15 verified components. Browse every category.
Feathered Spotlight
hfDims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets
Hand-Drawn Arrow
hfWobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen
Hand-Drawn Boil
hfHand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator
Hand-Drawn Box Label
hfWobbled rounded rectangle draws around a region with a handwritten label above or centered
Inline Highlight
rcnA clean marker-style inline highlight that animates behind text using an expanding highlight fill.
Marker Highlight
rcnDisplay text settles in, then a realistic marker stroke sweeps over the emphasized word on cue.
Outline Draw
hfA rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.
Pointer Circle + Countdown
hfDraw-on annotation ellipse around a target plus a countdown chip that pulses each tick
Scribble Callout Circle
hfWobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label
Speech Bubble
hfHand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
Squiggle Marks
hfHand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on
SVG Stroke Trace
hfAn authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.
Tracing Beam
hfA glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.
Vox Annotate
hfThe Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.
Whiteboard Ink
hfA whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.