Ecosystem Constellation

1"use client";
2 
3import type { ComponentType } from "react";
4import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
5 
6export interface EcosystemConstellationProps {
7  satelliteCount?: number;
8  centerLabel?: string;
9  accentColor?: string;
10  speed?: number;
11  className?: string;
12}
13 
14const FONT_FAMILY =
15  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
16 
17// Inline brand mark components — stylized for demo identification, drawn from
18// primitive SVG shapes only so the component stays self-contained.
19 
20function GitHubMark() {
21  return (
22    <svg viewBox="0 0 24 24" width={30} height={30} aria-hidden="true">
23      <path
24        fill="#fff"
25        d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.06c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.35.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39s1.97.13 2.89.39c2.21-1.49 3.18-1.18 3.18-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.41-5.27 5.69.41.36.77 1.06.77 2.13v3.16c0 .31.21.67.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"
26      />
27    </svg>
28  );
29}
30 
31function VercelMark() {
32  return (
33    <svg viewBox="0 0 24 24" width={28} height={28} aria-hidden="true">
34      <path fill="#fff" d="M12 2 L23 21 L1 21 Z" />
35    </svg>
36  );
37}
38 
39function StripeMark() {
40  return (
41    <svg viewBox="0 0 24 24" width={28} height={28} aria-hidden="true">
42      <path
43        fill="#fff"
44        d="M13.5 9.6c0-.6.5-.85 1.3-.85 1.15 0 2.6.35 3.75.97V6.16c-1.25-.5-2.5-.7-3.75-.7C11.7 5.46 9.6 7.06 9.6 9.7c0 4.13 5.7 3.47 5.7 5.25 0 .7-.6.93-1.45.93-1.25 0-2.85-.52-4.1-1.2v3.65c1.4.6 2.8.85 4.1.85 3.2 0 5.4-1.55 5.4-4.25-.02-4.45-5.75-3.65-5.75-5.33z"
45      />
46    </svg>
47  );
48}
49 
50function SlackMark() {
51  return (
52    <svg viewBox="0 0 24 24" width={26} height={26} aria-hidden="true">
53      <rect x="2" y="10" width="9" height="2.5" rx="1.25" fill="#36C5F0" />
54      <rect x="13" y="10" width="9" height="2.5" rx="1.25" fill="#2EB67D" />
55      <rect x="10" y="2" width="2.5" height="9" rx="1.25" fill="#ECB22E" />
56      <rect x="10" y="13" width="2.5" height="9" rx="1.25" fill="#E01E5A" />
57    </svg>
58  );
59}
60 
61function LinearMark() {
62  return (
63    <svg viewBox="0 0 24 24" width={28} height={28} aria-hidden="true">
64      <defs>
65// … truncated