Ecosystem Constellation

A central product logo orbited by integration satellites with pulsing data lines

Installation

$ pnpm dlx shadcn@latest add @remocn/ecosystem-constellation

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { EcosystemConstellation } from "@/components/remocn/ecosystem-constellation";

const EcosystemConstellationScene = () => (
  <EcosystemConstellation
    satelliteCount={6}
    centerLabel="V"
    accentColor="#a855f7"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="EcosystemConstellation"
    component={EcosystemConstellationScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`satelliteCount`	`number`	`6`	Number of orbiting integration satellites (clamped to 3..8)
`centerLabel`	`string`	`"V"`	Single character or short label rendered inside the central hub
`accentColor`	`string`	`"#a855f7"`	Color of the hub, glow, and connection lines
`className`	`string`	—	Optional className for the outer container