# Connector

Draw a curved connection and move a pulse along its exact path.

Page: https://20cuts.com/docs/components/connector

## Installation

Run from your product repository:

```sh
npx -y https://20cuts.com/releases/v0.3.0/20cuts-create-0.3.0.tgz video/20cuts
cd video/20cuts
npm ci
npm run studio
```

The installer includes this component, its source dependencies, runnable examples,
and skills for Codex and Claude Code. If 20cuts is already installed, import the
component from its existing source directory.

## Usage

```tsx
import { Connector } from "./system/motion";

export default function VideoScene() {
  return (
    <Connector from={{x: 200, y: 360}} to={{x: 1000, y: 360}} bend={120} at={0.4} width={1280} height={720} />
  );
}
```


## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| from (required) | Point | None | Start point in SVG coordinates. |
| to (required) | Point | None | End point in SVG coordinates. |
| width | number | 1280 | SVG width and viewBox width in pixels. |
| height | number | 720 | SVG height and viewBox height in pixels. |
| bend | number | 0 | Vertical offset of the quadratic control point; positive bends upward. |
| color | string | "#777" | CSS color. |
| thickness | number | 3 | Stroke thickness in pixels. |
| pulse | boolean | true | Show a repeating pulse after the line is drawn. |
| pulseDuration | number | 1.2 | Seconds for one complete pulse traversal. |
| at | number | 0 | Start time in seconds within the current Remotion Sequence. |
| duration | number | 0.7 | Animation duration in seconds. |
| style | CSSProperties | None | Styles applied to the component wrapper. |

Coordinates use the SVG viewBox. Match width and height to the containing world; they do not inherit the composition dimensions.

## Complete example

This is the source of the fictional component demonstration. Replace its content
with supported behavior and assets from your product.

```tsx
import React, { type CSSProperties, type ReactNode } from "react";

import { AbsoluteFill } from "remotion";

import { Connector, ProcessNode } from "./system";

const ink = "#141414", lime = "#b6f36b";

const center: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center" };

function Stage({ children, dark = false, style }: {
    children: ReactNode;
    dark?: boolean;
    style?: CSSProperties;
}) {
    return <AbsoluteFill style={{ fontFamily: "Arial, Helvetica, sans-serif", color: dark ? "#fff" : ink, background: dark ? ink : "#f7f7f5", ...center, ...style }}>{children}</AbsoluteFill>;
}

export function ConnectorExample() { return <Stage><Connector from={{ x: 350, y: 360 }} to={{ x: 930, y: 360 }} bend={130} at={0.3} duration={1.2} pulseDuration={1.6} color="#62972d" style={{ position: "absolute", inset: 0 }}/><div style={{ position: "absolute", left: 100, top: 280 }}><ProcessNode title="Your product" rows={["Screens + assets"]} width={250} state="success"/></div><div style={{ position: "absolute", left: 930, top: 280 }}><ProcessNode title="Your video" rows={["Ready to share"]} width={250} state="success"/></div></Stage>; }
```

Save it as src/ConnectorExample.tsx. This demonstration uses
1280×720, 30fps and 180 frames.
For a separate entry point, replace src/index.tsx with this registration, then
run npm run studio:

```tsx
import { Composition, registerRoot } from "remotion";
import { ConnectorExample } from "./ConnectorExample";

registerRoot(() => (
  <Composition
    id="ConnectorExample"
    component={ConnectorExample}
    width={1280}
    height={720}
    fps={30}
    durationInFrames={180}
  />
));
```

## Source

- https://20cuts.com/animation-system/library/source/motion/surfaces.tsx
- https://20cuts.com/animation-system/library/source/motion/core.ts

## Agent instructions

Use the 20cuts Connector component in this project's Remotion composition. Connect two workflow nodes in the same 1280×720 coordinate space; draw the connection before starting its pulse. Keep motion frame-driven and put timing in seconds relative to the current Sequence. Use the product's actual copy and assets. Preview the composition before rendering.