Vectors
Path Draw
SVG stroke reveal along a path.
PrimitivevectorsAdvanced
Install
npx remotion-ui@latest add path-drawAnimates SVG stroke reveal using @remotion/paths evolvePath().
Live preview
Advanced — installs @remotion/paths.
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add path-drawImport after install
@/remotion/primitives/path-draw- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: d, durationInFrames, stroke, 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 { PathDraw } from "@/remotion/primitives/path-draw";
<PathDraw d="M 10 10 L 190 190" durationInFrames={60} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| d* | string | — | SVG path d attribute. |
| durationInFrames | number | 60 | Draw animation length. |
| stroke | string | "#ffffff" | Stroke color. |