ecosystem-orbit

1import { loadFont } from "@remotion/google-fonts/Inter";
2import {
3  AbsoluteFill,
4  interpolate,
5  spring,
6  useCurrentFrame,
7  useVideoConfig,
8} from "remotion";
9import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
10import { EASING } from "@/remotion/lib/motion-tokens";
11 
12const { fontFamily } = loadFont("normal", {
13  weights: ["600", "700"],
14  subsets: ["latin"],
15});
16 
17export type EcosystemOrbitProps = {
18  centerLabel?: string;
19  satellites?: string[];
20  accentColor?: string;
21};
22 
23const COLORS = {
24  bg: "#080810",
25  center: "#e8b86d",
26  satellite: "#2dd4bf",
27  line: "rgba(232,184,109,0.35)",
28} as const;
29 
30/**
31 * One-shot ambient demo, not a seamless loop: the orbit's rotation period
32 * (2π × 38 frames ≈ 239 frames) and the pulse period (2π × 14 ≈ 88 frames)
33 * don't divide the composition's duration cleanly, and the satellites never
34 * complete a full revolution within a typical preview length — so there is
35 * no frame where the motion state repeats. Rather than force a seamless
36 * wrap, the orbit settles to a stop and fades out as a deliberate exit beat.
37 */
38const EXIT_DURATION = 30;
39 
40export const EcosystemOrbit: React.FC<EcosystemOrbitProps> = ({
41  centerLabel = "RemotionUI",
42  satellites = ["CLI", "Scenes", "Reels", "Docs", "Registry"],
43  accentColor = COLORS.center,
44}) => {
45  const frame = useCurrentFrame();
46  const { fps, width, height, durationInFrames } = useVideoConfig();
47  const safe = getSafeAreaPadding({ width, height });
48  const cx = width / 2;
49  const cy = height / 2;
50  const radius = Math.min(width, height) * 0.28;
51  const centerEnter = spring({
52    frame,
53    fps,
54    config: { damping: 16, stiffness: 100, mass: 0.9 },
55    durationInFrames: 30,
56  });
57 
58  /** Settle: freeze the orbit's motion clock before the fade begins so the
59   *  satellites glide to a rest position instead of vanishing mid-spin. */
60  const exitStart = durationInFrames - EXIT_DURATION;
61  const settledFrame = Math.min(frame, exitStart);
62  const pulse = (Math.sin(settledFrame / 14) + 1) / 2;
63  const exitProgress = interpolate(
64    frame,
65    [exitStart, durationInFrames - 1],
66    [0, 1],
67    { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: EASING.exit },
68  );
69 
70  return (
71    <AbsoluteFill
72      style={{
73        background: COLORS.bg,
74        backgroundImage: `radial-gradient(circle at 50% 50%, ${accentColor}12, transparent 55%)`,
75        fontFamily,
76        opacity: 1 - exitProgress,
77      }}
78    >
79      <svg
80        width={width}
81// … truncated