Arrow Annotate
A hand-drawn arrow that draws itself, with the head landing on the curve's own tangent.
PrimitivePaths & shapes
$ npx remotion-ui@latest add arrow-annotateThe shaft grows from its start and the head lands over the last quarter of the stroke, angled to the curve's tangent rather than to the straight line between the ends — so the arrow points where it is actually travelling.
The hand-drawn quality is two passes over the same curve at a sub-pixel offset,
the way a pen doubles back on a line. It is not a wobbling path: moving the
points per frame reads as a shaking arrow, which is a different and much worse
effect. Set sketch={false} for a single clean stroke.
Endpoints are fractions of the box, so the same arrow works at any size, and
bow pushes the midpoint along the line's own normal — the curve therefore
stays proportional whatever the arrow's length or angle. Negative values bow the
other way.
The stroke draws on an editorial curve rather than an ease-out. A strong ease-out spends most of its duration barely moving, so a drawing stroke on it finishes in its first frames and then crawls; a pen keeps roughly one speed.
The head is angled to the curve's own tangent, not to the straight line between the ends, so the arrow points where it is travelling. The hand-drawn quality is two passes at a sub-pixel offset — not a path whose points move per frame, which reads as a shaking arrow. The stroke draws on an editorial curve; a strong ease-out would finish in its first frames and then crawl.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/arrow-annotate- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: from, to, bow, label, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { ArrowAnnotate } from "@/remotion/primitives/arrow-annotate";
<ArrowAnnotate
from={{ x: 0.08, y: 0.16 }}
to={{ x: 0.82, y: 0.74 }}
bow={0.28}
label="this one"
durationInFrames={70}
exitAtInFrames={92}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| from | { x: number; y: number } | { x: 0.08, y: 0.16 } | Start of the shaft, as a fraction of the box. |
| to | { x: number; y: number } | { x: 0.82, y: 0.74 } | The point the head lands on, as a fraction of the box. |
| bow | number | 0.28 | How far the shaft bows off the straight line, as a fraction of the distance. Negative bows the other way. |
| label | string | - | Text set beside the start of the shaft. |
| width | number | 320 | Box width in pixels. |
| height | number | 220 | Box height in pixels. |
| stroke | string | "#E8B86D" | Colour of the shaft, head and label. |
| strokeWidth | number | 3 | Shaft weight. The second sketch pass runs at 60% of it. |
| headSize | number | 18 | Length of the head's barbs, in box units. |
| sketch | boolean | true | Draws the shaft twice at a sub-pixel offset. False for a single clean stroke. |
| delayInFrames | number | 0 | Frames to wait before the shaft starts drawing. |
| durationInFrames | number | 40 | Frames the shaft takes. The head lands over the last quarter. |
| exitAtInFrames | number | - | Frame the arrow starts leaving. Omit to leave it on screen. |
| exitInFrames | number | 14 | Frames the exit takes. |