Ecosystem Constellation

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

Installation

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

Usage

tsx

// 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}
  />
);

With Backdrop

Renders its scene transparent — supply the background via Backdrop:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { EcosystemConstellation } from "@/components/remocn/ecosystem-constellation";
 
<Backdrop fill={{ type: "gradient", value: "radial-gradient(ellipse at center, #14101e 0%, #05030a 75%)" }}>
  <EcosystemConstellation satelliteCount={6} centerLabel="V" accentColor="#a855f7" />
</Backdrop>

Props5

Prop	Type	Default
satelliteCount	number6 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
speed	number1 Time multiplier applied as frame × speed. Above 1 the satellites assemble and orbit sooner
className	string— Optional className for the outer container

satelliteCountnumber
Number of orbiting integration satellites (clamped to 3..8)
Default6
centerLabelstring
Single character or short label rendered inside the central hub
Default"V"
accentColorstring
Color of the hub, glow, and connection lines
Default"#a855f7"
speednumber
Time multiplier applied as frame × speed. Above 1 the satellites assemble and orbit sooner
Default1
classNamestring
Optional className for the outer container