Connector Lines
The edges between anchored elements, and nothing else — the primitive under a diagram.
PrimitivePaths & shapesAdvanced
$ npx remotion-ui@latest add connector-linesThis draws lines between named points and leaves the boxes to you. Position your own nodes at the same fractional coordinates the anchors use — as the preview does — and the lines and the layout stay in register at any size. That is why anchors are fractions rather than pixels.
Three edge shapes ship. curve bows toward the midpoint's own normal, so the
bow stays proportional whatever the edge's length or angle; elbow turns once
at right angles, for hierarchies read as columns; straight goes direct.
Edges draw in order with a stagger, each on its own pathLength={1}, so a long
curve and a short hop take the same time and the diagram assembles at an even
pace. An edge naming an anchor that does not exist is dropped rather than drawn
to the origin, which would put a line through the corner of the box.
dashed fades its edges in rather than drawing them — a dash pattern cannot
both space the line and reveal it. Use it when the lines are a relationship
rather than a flow.
For a full scene with payloads travelling the edges, use data-flow-pipes.
This is the primitive under a diagram, not the diagram: position your own nodes at the same fractional anchors and the lines stay in register at any size. Each edge draws on its own pathLength={1}, so a long curve and a short hop take the same time. An edge naming a missing anchor is dropped rather than drawn to the origin. For a full scene with payloads travelling the edges, use data-flow-pipes.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/connector-lines- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: anchors, edges, width, height, 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 { ConnectorLines } from "@/remotion/primitives/connector-lines";
<ConnectorLines
anchors={[
{ id: "source", x: 0.12, y: 0.5 },
{ id: "parse", x: 0.44, y: 0.18 },
{ id: "output", x: 0.86, y: 0.5 },
]}
edges={[
{ from: "source", to: "parse", shape: "curve", bow: 0.12, dot: true },
{ from: "parse", to: "output", shape: "curve", bow: 0.12, dot: true },
]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| anchors | ConnectorAnchor[] | 4 sample anchors | Named points as fractions of the box, so the same table drives your layout. |
| edges | ConnectorEdge[] | 4 sample edges | from / to anchor ids, plus shape, bow, colour and an optional arrival dot. |
| width | number | 420 | Box width in pixels. |
| height | number | 240 | Box height in pixels. |
| stroke | string | "#E8B86D" | Default edge colour. |
| strokeWidth | number | 2 | Edge weight. |
| dashed | boolean | false | Dashes every edge. Dashed edges fade in rather than draw. |
| delayInFrames | number | 0 | Frames to wait before the first edge draws. |
| durationInFrames | number | 26 | Frames one edge takes to draw. |
| staggerInFrames | number | 10 | Frames between edges. |
| exitAtInFrames | number | - | Frame the lines start leaving. Omit to leave them on screen. |
| exitInFrames | number | 16 | Frames the exit takes. |