Ecosystem Constellation

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

A composition for telling an "everything connects" story. A pulsing logo sits in the center while integration satellites fly in from beyond the frame and settle into elliptical orbits at different radii and angular speeds. Connection lines between the hub and each satellite periodically light up — and the firing satellite scales up by a hair to feel like real data is moving.

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.

Notes

Orbits are elliptical, not circular

Each satellite uses a slightly different radiusX and radiusY plus its own angular speed, so the constellation never falls into a robotic, perfectly-symmetric pattern. Data pulses cycle through satellites deterministically using Math.floor(frame / 30) % count, which keeps the animation render-stable while still feeling alive.