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.

component

Feathered Spotlight

hf

Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets

component

Hand-Drawn Arrow

hf

Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen

component

Hand-Drawn Boil

hf

Hand-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

component

Hand-Drawn Box Label

hf

Wobbled rounded rectangle draws around a region with a handwritten label above or centered

component

Inline Highlight

rcn

A clean marker-style inline highlight that animates behind text using an expanding highlight fill.

component

Marker Highlight

rcn

Display text settles in, then a realistic marker stroke sweeps over the emphasized word on cue.

component

Outline Draw

hf

A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.

component

Pointer Circle + Countdown

hf

Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick

component

Scribble Callout Circle

hf

Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label

block

Speech Bubble

hf

Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils

component

Squiggle Marks

hf

Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on

component

SVG Stroke Trace

hf

An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.

component

Tracing Beam

hf

A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.

component

Vox Annotate

hf

The 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.

component

Whiteboard Ink

hf

A 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.