Chord Ring

Chords link a ring of integration names around a glowing center that reads a caption

Installation

$ pnpm dlx shadcn@latest add @remocn/chord-ring

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ChordRing } from "@/components/remocn/chord-ring";
 
const ChordRingScene = () => (
  <ChordRing
    segments={["Acme", "Kitebase", "Lumen", "Fernway", "Quarry", "Orbitly"]}
    brandIndex={0}
    caption="Connects to everything"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ChordRing"
    component={ChordRingScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

Ring segments grow in around a glowing center, then curved chords draw between them, with the brandIndex segment linked to every other one in the accent color. At the end the ring dims and the caption lands in the center. Pass up to 12 segments names (a segment named "remocn" renders as the Remocn logo) and a caption. Ships dark and light via theme.

Props6

Prop	Type	Default
segments	string[]DEFAULT_SEGMENTS Names around the ring. Up to 12 are used.
brandIndex	number0 Index of the segment that links to all the others.
caption	string"Connects to everything" Line shown in the center at the end.
accent	string"#3B5BFD" Color of the brand segment chords.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
speed	number1 Playback speed multiplier for the whole timeline.

segmentsstring[]
Names around the ring. Up to 12 are used.
DefaultDEFAULT_SEGMENTS
brandIndexnumber
Index of the segment that links to all the others.
Default0
captionstring
Line shown in the center at the end.
Default"Connects to everything"
accentstring
Color of the brand segment chords.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1