<3/products/personal-site/remotion/scenes/

AvatarOrbit.data.ts

// Plain data for the AvatarOrbit scene — NO remotion/React imports, so it's
// safe to pull into server components (scenes.meta.ts, the /videos pages, the
// export route) without tripping Remotion's "use client" guard.

// Demo avatars from public/avatars. Center is jane; villagers are jane-1..10.
// Paths are relative to public/ (no leading slash) — the composition wraps them
// in Remotion's staticFile() so they resolve both when served by Next (essay
// embed) and by the render server (export).
export const DEMO_OWNER = "avatars/jane.png";
export const DEMO_VILLAGERS = [
  "avatars/jane-1.png",
  "avatars/jane-2.png",
  "avatars/jane-3.png",
  "avatars/jane-4.png",
  "avatars/jane-5.png",
  "avatars/jane-6.png",
  "avatars/jane-7.png",
  "avatars/jane-8.png",
  "avatars/jane-9.png",
  "avatars/jane-10.png",
];

export type AvatarOrbitProps = {
  /** The central profile pic. */
  ownerSrc: string;
  /** The profile pics that rotate around the center. */
  villagerSrcs: string[];
  /** How far the rotating avatars sit from the center, in composition px. */
  radius: number;
  /** Diameter of each rotating avatar, in composition px. */
  avatarSize: number;
  /** Diameter of the central avatar, in composition px. */
  ownerSize: number;
  /**
   * Panel background. Transparent for essay embeds (so the scene bleeds onto
   * the page); a solid color for exported video (X renders transparency black).
   */
  background: string;
};

export const avatarOrbitDefaultProps: AvatarOrbitProps = {
  ownerSrc: DEMO_OWNER,
  villagerSrcs: DEMO_VILLAGERS,
  radius: 330,
  avatarSize: 170,
  ownerSize: 170,
  background: "transparent",
};