Annotations & callouts
Also searched as: annotations, callouts, drawn arrows, whiteboard callout, highlight circle, vox annotate
Canonical Definition
Annotations and callouts are motivated graphic markers — hand-drawn arrows, highlight rings, speech bubbles, and drawn underlines — that direct visual focus to a specific element.
12 to 20 frames for the draw action; holds for 60 to 90 frames
cubic-bezier(0.22, 1, 0.36, 1)
When presenting dense UI surfaces, complex data visualizations, or code repositories, the viewer cannot instantly determine where to look. Annotations guide eye movement with temporal urgency.
Popularized by analytical journalism (e.g. Vox, NYT), animated markers draw themselves on screen just before the narrator discusses the target detail, creating an intuitive cognitive bridge.
SVG Stroke-Dashoffset Handwriting & Highlighting
Simulating physical pen drawing with variable stroke velocity
By interpolating `strokeDashoffset` from the total path length down to zero, arrows and circles appear to be sketched live in real-time.
How this works: A realistic hand-drawn highlighter stroke that washes translucent color across key phrases.
- SVG path length interpolation with ease-out deceleration
- Simulated ink bleed and edge texture
- Draws attention precisely when speech reaches the keyword
Analytical Focus Rings & Connector Labels
Isolating subjects with pointer lines and secondary data pills
A connector line tracks a moving subject and deploys a clean label card, linking analytical prose directly to the highlighted footage.
How this works: Editorial callout featuring an animated tracking ring and expanding connector line.
- Coordinated multi-step sequence: ring pops -> line draws -> label reveals
- Precise coordinate pinning to target feature
- Clear visual hierarchy between indicator and metadata
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Time the arrival of the marker exactly 3 frames before the audio speaks the keyword.
- Use high-contrast vibrant colors (canary yellow, neon cyan, bright coral) that stand out against both dark and light footage.
Common Failure Modes (What to avoid)
- Drawing an arrow with constant linear speed: real pen gestures accelerate on the curve and settle at the head.
- Leaving annotations on screen after the discussion has moved to another topic.
Working catalog implementations
Typed Remotion components ready to drop into code.
Marker Highlight
Display text settles in, then a realistic marker stroke sweeps over the emphasized word on cue.
Vox Annotate
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.
Hand-Drawn Arrow
Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen
Hand-Drawn Box Label
Wobbled rounded rectangle draws around a region with a handwritten label above or centered
Build annotations & callouts in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Camera moves & focus
Camera movement applies the spatial language of cinematography — push-ins, pull-backs, orbit rotations, and rack focus — to 2D graphic canvases that possess no physical lens.
Content & VisualizationCharts & metrics
Data storytelling is the animated revelation of charts, metric count-ups, and graphs in sequential narrative order, guiding the viewer from premise to statistical conclusion.
Motion FundamentalsTiming, spacing & rhythm
Timing is the number of frames an action takes; spacing is the variation in position between successive frames; rhythm is the overarching cadence governing the pace of cuts and arrivals.