# Transit Lines
URL: https://remocn.dev/docs/logo-stings/transit-lines

Metro-map lines converge on a hub station that resolves into the logo as the next stop.

- Install: `npx shadcn@latest add @remocn/transit-lines`
- Vibe: premium
- Natural length: 96f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/transit-lines
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TransitLines } from "@/components/remocn/transit-lines";

const TransitLinesScene = () => (
  <TransitLines
    title="remocn"
    kicker="Next stop"
    accent="#3B5BFD"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="TransitLines"
    component={TransitLinesScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Coloured line routes draw across a grid, stations pop as the lines pass, and all lines converge on a hub that grows and resolves into `title`, with `kicker` above it. Pass `title`, `kicker` and, to draw your own map, `lines`. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"remocn"` | Name the hub resolves into; Remocn renders the real logo. |
| `kicker` | `string` | `"Next stop"` | Small line above the title. |
| `lines` | `TransitLine[]` | `DEFAULT_LINES` | Routes as grid points, with tone, optional stations and labels. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A platform or integrations product where many things converge in one place.
- A roadmap or release-train beat with a next-stop metaphor.
- An editorial logo reveal with a diagram feel.

## Don't use when
- A prompt should resolve into the brand through nodes — use `neural-pulse`.
- A single dotted route is enough — use `paper-plane`.
- You only need a name and a tagline — use `first-light`.