Transit Lines

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

Installation

$ pnpm dlx 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.

Props6

Prop	Type	Default
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	number1 Playback multiplier for the whole timeline; 1 is normal speed.

titlestring
Name the hub resolves into; Remocn renders the real logo.
Default"remocn"
kickerstring
Small line above the title.
Default"Next stop"
linesTransitLine[]
Routes as grid points, with tone, optional stations and labels.
DefaultDEFAULT_LINES
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1