51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2719,"use client"; import type { ComponentType } from "react"; import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"; export interface EcosystemConstellationProps { satelliteCount?: number; centerLabel?: string; accentColor?: string; speed?: number; className?: string; } const FONT_FAMILY = "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif"; // Inline brand mark components — stylized for demo identification, drawn from // primitive SVG shapes only so the component stays self-contained. function GitHubMark() { return ( ); } function VercelMark() { return ( ); } function StripeMark() { return ( ); } function SlackMark() { return ( ); } function LinearMark() { return ( ); } function FigmaMark() { return ( ); } function NotionMark() { return ( ); } function DiscordMark() { return ( ); } interface SatelliteBrand { Logo: ComponentType; bg: string; } const SATELLITE_BRANDS: SatelliteBrand[] = [ { Logo: GitHubMark, bg: "#1f1f23" }, { Logo: VercelMark, bg: "#0a0a0a" }, { Logo: StripeMark, bg: "#635bff" }, { Logo: SlackMark, bg: "#1a1d21" }, { Logo: LinearMark, bg: "#5e6ad2" }, { Logo: FigmaMark, bg: "#1e1e1e" }, { Logo: NotionMark, bg: "#1a1a1a" }, { Logo: DiscordMark, bg: "#5865f2" }, ]; export function EcosystemConstellation({ satelliteCount = 6, centerLabel = "V", accentColor = "#a855f7", speed = 1, className, }: EcosystemConstellationProps) { const frame = useCurrentFrame() * speed; const { fps } = useVideoConfig(); const count = Math.max( 3, Math.min(SATELLITE_BRANDS.length, Math.floor(satelliteCount)), ); // Center pulse (0..1) const pulse = (Math.sin(frame / 12) + 1) / 2; const centerScale = 1 + pulse * 0.06; // Geometry const cx = 640; const cy = 360; const baseRadiusX = 230; const baseRadiusY = 180; const offscreenRadius = 1200; // 150% of width // Per-satellite assembly spring (staggered) const satellites = Array.from({ length: count }).map((_, i) => { const stagger = i * 4; const sp = spring({ frame: frame - stagger, fps, config: { mass: 1.1, damping: 16, stiffness: 70 }, durationInFrames: 50, }); const radiusFactor = interpolate(sp, [0, 1], [offscreenRadius, 1]); // Slight elliptical variation per satellite const orbitOffset = i * 22; const rX = baseRadiusX + orbitOffset; const rY = baseRadiusY + orbitOffset * 0.7; // Different angular speed per orbit (slower for outer) const angularSpeed = 0.012 - i * 0.0008; const baseAngle = (i / count) * Math.PI * 2; const angle = baseAngle + frame * angularSpeed; // Use radiusFactor as a multiplier on the orbit radius const x = cx + Math.cos(angle) * rX * radiusFactor; const y = cy + Math.sin(angle) * rY * radiusFactor; // Data pulse: which satellite is currently "firing" const activeIdx = Math.floor(frame / 30) % count; const isActive = activeIdx === i; // Within the active 30-frame window, fade the line in/out const localFrame = frame - Math.floor(frame / 30) * 30; const lineOpacity = isActive ? interpolate(localFrame, [0, 8, 22, 30], [0.15, 0.9, 0.9, 0.15], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }) : 0.15; const satScale = isActive ? interpolate(localFrame, [0, 8, 22, 30], [1, 1.1, 1.1, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }) : 1; const brand = SATELLITE_BRANDS[i % SATELLITE_BRANDS.length]; return { x, y, Logo: brand.Logo, color: brand.bg, lineOpacity, satScale, visible: sp > 0.02, }; }); return (

{/* Center logo */}

{centerLabel}

{/* Satellites */} {satellites.map((s, i) => { const Logo = s.Logo; return (

); })}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remotion"}]]}]}]]}],["$","$L51",null,{"namespace":"@remocn","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/remocn/ecosystem-constellation/index.tsx","content":"$53","type":"registry:component","target":"components/remocn/ecosystem-constellation.tsx"}],"className":"h-[70svh] min-h-80"}]]}]