Dashed Path Travel
Anything travelling any route, laying a dashed trail behind it.
PrimitivePaths & shapes
$ npx remotion-ui@latest add dashed-path-travelGive it a d string or a list of waypoints and it builds the route, sends
something along it, and marks the road behind. The traveller is children —
anything renderable, centred on the point, and turned to face along the route
with orient.
The trail is a fixed dash pattern revealed by a mask that grows with the head, not a dashed stroke that grows. Growing the pattern slides every dash along the route as the line extends, which reads as a line being stretched; a fixed pattern under a growing mask reads as a road being marked out.
Position and angle come from arc-length sampling, so the traveller moves at a constant speed around corners instead of hurrying through the straight sections the way a per-segment lerp does.
trackColor draws the part of the route not yet travelled. Leave it on when the
destination matters and the viewer should see where this is going; omit it when
the reveal is the point.
For a cursor specifically — with its own hardware shape and click beats — use
cursor-path.
The trail is a fixed dash pattern revealed by a mask that grows with the head, not a dashed stroke that grows — growing the pattern slides every dash along the route, which reads as a stretching line rather than a road being marked. Position and angle come from arc-length sampling, so the traveller keeps a constant speed around corners. For a cursor with its own hardware shape and click beats, use cursor-path.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/dashed-path-travel- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: d, waypoints, smoothing, dotRadius, 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 { DashedPathTravel } from "@/remotion/primitives/dashed-path-travel";
<DashedPathTravel
waypoints={[
{ x: 20, y: 150 },
{ x: 90, y: 60 },
{ x: 280, y: 40 },
]}
orient
durationInFrames={86}
exitAtInFrames={92}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| d | string | - | The route as a path string. Give this or waypoints. |
| waypoints | TravelPoint[] | 4 sample points | Points the route passes through, in path units. |
| smoothing | number | 0.4 | Corner rounding when building from waypoints. 0 gives straight hops. |
| children | ReactNode | - | What travels the path. Centred on the point; falls back to a dot. |
| dotRadius | number | 7 | Radius of the default dot, used when no children are given. |
| orient | boolean | false | Turns the traveller to the path's tangent. |
| width | number | 320 | Box width in pixels. |
| height | number | 200 | Box height in pixels. |
| viewBox | string | - | Omit to frame the route automatically from its bounding box. |
| trailColor | string | "#E8B86D" | The dashed route behind the traveller. |
| trackColor | string | "rgba(255,255,255,0.12)" | The route not yet travelled. Omit to hide where this is going. |
| strokeWidth | number | 2.5 | Weight of both the track and the trail. |
| dash | number | 9 | Dash and gap length, in path units. |
| delayInFrames | number | 0 | Frames to wait before setting off. |
| durationInFrames | number | 70 | Frames the trip takes. |
| exitAtInFrames | number | - | Frame the whole thing starts leaving. Omit to leave it on screen. |
| exitInFrames | number | 16 | Frames the exit takes. |