Path Draw
SVG stroke reveal with auto-fit framing and multi-path stagger.
PrimitivePaths & shapesAdvanced
path-draw30fps · 960×540
Install
$ npx remotion-ui@latest add path-drawReveals a stroke with @remotion/paths evolvePath(), and rides a bright head
along the tip while it draws. Pass an array to d to draw several paths in
sequence — each starts staggerInFrames after the last.
Omit viewBox and the artwork is framed from its own bounding box, so a path
exported anywhere on its canvas still lands centred and filling the frame. Set
fill to flood colour in once the outline closes.
Advanced. Installs @remotion/paths.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/path-draw- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: d, durationInFrames, delayInFrames, staggerInFrames, 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
Example
import { PathDraw } from "@/remotion/primitives/path-draw";
<PathDraw d={["M 20 180 L 100 20 L 180 180", "M 60 120 L 140 120"]} durationInFrames={60} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| d* | string | string[] | - | One path, or several drawn in order. |
| durationInFrames | number | 60 | Draw length for each path. |
| delayInFrames | number | 0 | Frames before the first path starts. |
| staggerInFrames | number | 8 | Offset between paths when d is an array. |
| stroke | string | "#e8b86d" | Stroke color. |
| strokeWidth | number | 4 | Stroke width in path units. |
| width | number | 200 | Rendered SVG width in px. |
| height | number | 200 | Rendered SVG height in px. |
| viewBox | string | - | Omit to frame the artwork from its bounding box. |
| fill | string | - | Fill flooded in once the stroke closes. |
| head | boolean | true | Dot riding the tip while it draws. |
| glow | boolean | true | Soft bloom around the stroke. |