Workflow Console

import { type CountryKey, defaultCountries } from "./countries";

export const workflowContent = {
  prefix: "Meet",
  product: "Workflow Console",
  command:
    "prepare release v2.4. check the build, run tests in staging, then roll out with a canary.",
  fetching: "Reading release context",
  launchCommand: "Ship it.",
  geography: "Choose an environment",
  campaign: "Release v2.4",
  delivery: "rolling out",
  deliveryDetail: "checks are PASSING, rollback is READY",
  growth: "Less waiting. More shipping.",
  statsLoading: "Reading pipeline metrics",
  statsQuestion: "how is the pipeline doing?",
  followup: "where is the bottleneck?",
  changeCommand: "What should we improve?",
  recommendation: "The test queue is growing — add parallel workers.",
  budgetLabel: "Test workers",
  oldBudget: "2",
  newBudget: "6",
  doubleCommand: "scale to six workers",
  closing: "Keep your work moving",
  terminalTitle: "workflow　~/releases/v2.4",
  chartTitle: "Pipeline throughput · demo runs / hour",
};

export type WorkflowContent = typeof workflowContent;
export type ChartBar = { label: string; value: number; detail: string };
export const workflowBars: ChartBar[] = [
  { label: "Baseline", value: 24, detail: "24 runs / h" },
  { label: "Cache", value: 48, detail: "48 runs / h" },
  { label: "Parallel", value: 72, detail: "72 runs / h" },
  { label: "Optimized", value: 96, detail: "96 runs / h" },
];

export type TerminalRun = "campaign" | "launched" | "stats";
export type TerminalRow = {
  at: number;
  text: string;
  kind?: "prompt" | "call" | "thought" | "note" | "result";
  highlight?: string;
};

export type Environment = {
  label: string;
  topology: "single" | "parallel" | "cluster" | "canary";
};
export const workflowEnvironments: Environment[] = [
  { label: "Preview", topology: "single" },
  { label: "Staging", topology: "parallel" },
  { label: "Production", topology: "cluster" },
  { label: "Canary", topology: "canary" },
];
export const workflowTools = [
  "Workflow Read Release Plan",
  "Checked in 1.1s",
  "Workflow Run Test Suite",
  "Checked in 1.9s",
  "Workflow Create Canary",
  "Workflow Start Rollout",
  "Checked in 0.1s",
];

export type WorkflowConsoleProps = {
  productName?: string;
  accentColor?: string;
  backgroundColor?: string;
  content?: Partial<WorkflowContent>;
  /** Legacy map override. Defaults now use environment diagrams. */
  countries?: CountryKey[];
  environments?: Environment[];
  tools?: string[];
  bars?: ChartBar[];
  terminalRows?: Partial<Record<TerminalRun, TerminalRow[]>>;
  logoSrc?: string;
  audioSrc?: string;
  volume?: number;
};

export function resolveWorkflowProps(props: WorkflowConsoleProps) {
  // `undefined` from optional Studio fields must not erase concrete defaults.
  const overrides = Object.fromEntries(
    Object.entries(props.content ?? {}).filter(
      ([, value]) => value !== undefined,
    ),
  );
  const content: WorkflowContent = { ...workflowContent, ...overrides };
  if (props.productName !== undefined) content.product = props.productName;
  const countries = props.countries?.filter((key) =>
    defaultCountries.includes(key),
  );
  const bars = props.bars?.filter(
    (bar) => Number.isFinite(bar.value) && bar.value >= 0,
  );
  const environments = props.environments?.filter(
    (item) =>
      item.label.trim() &&
      workflowEnvironments.some((entry) => entry.topology === item.topology),
  );
  const customTools = props.tools?.filter((item) => item.trim());
  return {
    content,
    environments: environments?.length
      ? environments.slice(0, 8)
      : workflowEnvironments,
    useCountries: Boolean(countries?.length && !environments?.length),
    tools: customTools?.length ? customTools.slice(0, 10) : workflowTools,
    accent: props.accentColor?.trim() || "#8ed8f8",
    background: props.backgroundColor?.trim() || "#0e1b2b",
    countries: countries?.length ? countries : defaultCountries,
    bars: bars?.length ? bars.slice(0, 8) : workflowBars,
    terminalRows: props.terminalRows ?? {},
    logoSrc: props.logoSrc?.trim(),
  };
}

export type WorkflowScene = ReturnType<typeof resolveWorkflowProps>;
export type SceneProps = { scene: WorkflowScene; t: number };

export function terminalContent(
  run: TerminalRun,
  c: WorkflowContent,
): TerminalRow[] {
  if (run === "campaign")
    return [
      { at: 0.1, text: c.command, kind: "prompt" },
      { at: 0.22, text: "Checked in 1.2s", kind: "thought" },
      {
        at: 0.4,
        text: 'Call workflow · read_release (version: "v2.4")',
        kind: "call",
      },
      {
        at: 0.55,
        text: "  changes: 12 merged · 0 conflicts",
        kind: "note",
        highlight: "12",
      },
      { at: 0.72, text: "Call workflow · inspect_test_suite", kind: "call" },
      { at: 0.9, text: "  48 checks · 4 parallel groups", kind: "note" },
      {
        at: 1.1,
        text: "All 12 changes are ready. Running the 48 checks in staging,",
        highlight: "12",
      },
      { at: 1.23, text: "then a canary rollout with automatic rollback." },
    ];
  if (run === "launched")
    return [
      { at: 0, text: c.launchCommand, kind: "prompt" },
      {
        at: 0.13,
        text: 'Call workflow · create_release (version: "v2.4")',
        kind: "call",
      },
      {
        at: 0.28,
        text: "  status: READY · checks: PASSING",
        kind: "note",
        highlight: "READY",
      },
      {
        at: 0.42,
        text: 'Call workflow · prepare_environment (name: "Staging")',
        kind: "call",
      },
      { at: 0.6, text: "  checks: 48 passed · errors: 0", kind: "note" },
      {
        at: 0.72,
        text: 'Call workflow · create_canary (traffic: "10%")',
        kind: "call",
      },
      { at: 0.86, text: "Call workflow · start_rollout", kind: "call" },
      {
        at: 1,
        text: '✓ Release live: "v2.4" — healthy',
        kind: "result",
      },
    ];
  return [
    { at: 0.08, text: c.statsQuestion, kind: "prompt" },
    { at: 0.2, text: "Checked in 0.6s", kind: "thought" },
    {
      at: 0.37,
      text: 'Call workflow · get_pipeline_metrics (window: "1h")',
      kind: "call",
    },
    {
      at: 0.58,
      text: "  median build 42s · target under 60s",
      kind: "note",
      highlight: "42s",
    },
    {
      at: 0.77,
      text: "Builds are healthy — median duration is 42s, under your",
      highlight: "42s",
    },
    {
      at: 0.88,
      text: "60s target. Test jobs spend 18s waiting in the queue.",
      highlight: "18s",
    },
    { at: 1.55, text: c.followup, kind: "prompt" },
    { at: 1.65, text: "Checked in 0.4s", kind: "thought" },
    {
      at: 2.0,
      text: "The cache is working. Tests are waiting for free workers.",
    },
    { at: 2.25, text: "Two workers are busy — there’s room to scale." },
  ];
}

// Natural Earth 1:110m country outlines, normalized to a 100×100 viewBox.
// Source: https://github.com/nvkelso/natural-earth-vector/blob/master/geojson/ne_110m_admin_0_countries.geojson
// Public-domain cartographic data. Mainland silhouettes except Japan's main islands.
export const countryOutlines = {
  USA: "M9.8,32.5L14.0,32.5L18.4,32.5L19.9,32.5L24.4,32.5L28.8,32.5L33.3,32.5L37.7,32.5L42.8,32.5L47.9,32.5L51.0,32.5L52.2,33.0L53.3,33.1L54.8,33.3L56.2,33.8L57.4,33.6L59.3,33.9L61.1,33.5L62.5,34.1L64.0,34.6L65.2,35.1L66.3,35.6L67.1,36.3L68.2,36.8L69.8,37.9L70.1,39.3L70.4,40.6L69.3,42.3L69.6,43.4L71.7,42.6L73.2,42.4L75.2,41.6L75.5,40.5L76.9,40.5L78.3,40.5L80.6,38.7L83.5,38.4L86.2,38.4L87.5,37.7L88.5,35.9L89.6,34.8L91.1,34.9L91.8,37.4L92.7,38.2L91.4,39.4L89.9,40.0L88.3,40.4L87.5,41.3L87.2,42.4L88.4,43.2L86.8,43.7L85.7,43.9L84.2,44.1L83.0,44.5L85.1,44.2L83.5,44.9L82.1,45.2L82.3,46.3L81.2,47.5L80.2,46.6L80.9,47.7L80.5,48.8L79.6,50.0L80.0,49.0L79.0,47.1L79.0,48.7L78.1,48.5L79.1,49.0L79.2,50.4L79.9,52.5L79.0,53.6L77.5,54.1L76.5,54.9L75.0,55.6L73.1,57.0L72.3,57.7L71.6,58.6L71.4,59.7L71.6,60.7L72.1,62.0L72.8,63.1L73.5,65.4L73.4,66.4L73.0,67.9L71.8,67.9L71.0,66.9L70.2,65.7L69.5,64.5L69.6,62.9L68.1,60.9L66.0,61.3L65.0,60.6L64.0,60.2L62.4,60.4L61.0,60.2L59.9,60.3L59.5,61.5L58.4,62.1L57.4,62.0L56.3,61.3L55.0,61.4L53.9,61.1L51.7,61.6L50.3,62.7L48.9,63.3L48.0,64.0L47.7,65.7L48.0,66.9L46.4,66.6L45.2,66.2L44.5,64.4L43.6,63.6L43.1,62.7L42.4,61.7L41.3,61.1L40.1,61.1L39.1,62.3L37.9,61.9L36.8,60.6L35.4,59.2L34.1,58.2L31.5,58.2L30.3,58.8L27.4,58.8L24.0,57.7L21.7,57.0L20.0,56.9L18.3,57.0L17.0,55.4L16.2,54.8L14.8,54.3L13.4,54.2L12.9,53.1L11.4,51.6L10.2,49.5L9.6,48.7L8.4,47.4L8.2,46.2L7.4,45.4L7.8,44.2L7.7,42.9L7.2,41.8L7.8,40.4L8.0,39.0L8.2,37.7L7.9,35.7L7.4,34.4L7.2,33.4L9.3,33.9L10.1,35.3L10.3,33.7L9.8,32.5Z",
  Brazil:
    "M52.2,92.7L51.6,91.5L52.5,90.5L51.3,89.0L49.5,87.8L47.3,86.3L44.3,84.7L42.8,85.0L45.8,82.0L48.2,79.8L49.7,78.9L51.6,77.7L51.6,76.0L50.5,74.7L49.4,75.1L49.8,73.9L50.1,72.6L50.1,71.4L48.5,71.3L47.5,70.4L47.3,68.4L45.4,67.1L42.2,67.1L42.3,64.2L41.7,63.0L42.1,61.3L42.7,60.3L43.1,58.6L42.6,57.2L41.4,56.6L41.5,54.5L37.3,54.4L36.5,51.8L37.1,50.8L36.5,48.9L35.3,48.3L33.9,48.3L33.0,47.7L31.5,47.2L30.6,46.4L28.2,46.1L25.8,44.1L26.0,42.6L25.9,40.1L23.1,40.5L21.9,41.3L20.0,42.2L18.4,42.9L16.8,42.7L15.5,43.1L14.5,42.9L14.7,39.5L12.9,40.8L10.9,40.8L10.1,39.6L8.7,39.5L9.1,38.5L7.9,37.2L7.0,35.2L7.6,33.9L8.9,33.3L8.7,32.1L9.4,30.3L11.9,28.8L13.7,28.4L16.0,28.2L17.0,22.2L16.7,20.0L15.7,19.2L15.7,17.6L16.9,17.2L16.2,16.4L16.1,15.0L20.4,15.0L21.1,14.3L22.2,16.3L23.8,17.2L25.5,17.0L27.5,15.8L28.7,14.6L30.3,13.9L28.3,13.3L28.0,11.9L28.1,10.4L27.1,9.9L29.1,9.9L30.9,10.5L33.1,9.6L35.5,8.8L36.3,8.0L37.2,7.3L37.4,8.7L38.7,10.1L37.7,12.7L38.3,13.8L38.4,14.8L39.8,15.9L40.8,16.0L41.8,15.5L42.8,15.1L44.7,14.7L46.4,14.8L46.5,13.3L48.4,13.2L49.6,13.7L50.6,14.1L51.8,13.6L53.1,14.1L53.9,13.3L54.6,11.7L55.9,9.7L57.2,10.8L58.4,14.6L59.6,15.0L59.7,16.5L58.0,18.3L62.6,19.3L62.6,21.5L64.3,20.0L67.1,20.8L70.7,22.2L71.8,23.4L71.4,24.7L74.0,24.0L78.2,25.1L81.5,25.1L84.7,26.9L87.5,29.3L89.2,29.9L91.1,30.0L91.9,30.7L92.6,33.5L93.0,34.8L92.1,38.5L91.0,39.9L87.9,42.9L86.5,45.4L84.9,47.3L83.7,49.0L83.9,53.1L83.3,56.5L83.1,57.9L82.4,58.8L82.0,61.7L79.8,64.6L79.4,66.8L77.6,67.8L77.1,69.1L74.7,69.1L71.3,69.9L69.7,70.9L67.3,71.5L64.7,73.3L62.8,75.4L62.5,77.1L62.9,78.3L62.5,80.5L62.0,81.6L60.5,82.8L58.0,86.6L56.1,88.4L54.6,89.4L53.6,91.5L52.2,92.7Z",
  UAE: "M7.0,50.5L10.2,49.7L10.8,54.6L24.8,51.8L39.6,52.2L50.4,52.8L62.6,40.7L75.9,29.2L87.2,18.2L90.6,24.3L93.0,38.4L83.9,38.5L82.4,50.1L85.6,52.6L77.5,56.1L77.5,63.4L72.2,70.8L71.8,78.0L68.2,81.8L14.5,72.8L7.7,54.7L7.0,50.5Z",
  India:
    "M92.8,30.8L93.0,31.9L92.0,32.4L92.2,34.2L90.1,33.7L86.3,35.7L86.4,37.4L84.8,39.9L84.6,41.3L83.3,43.8L81.0,43.1L80.9,46.1L80.2,47.1L80.5,48.4L79.1,49.1L77.5,44.4L76.2,46.3L74.6,44.8L75.5,43.1L76.9,42.9L78.2,40.4L76.5,39.9L73.8,40.0L71.0,39.6L70.7,37.5L69.3,37.4L67.0,36.1L65.9,38.1L68.1,39.7L66.2,40.8L65.6,41.8L67.4,42.6L66.9,44.4L67.9,46.6L68.4,49.0L67.9,50.1L65.9,50.1L62.3,50.7L62.5,52.9L60.9,54.6L56.7,56.6L53.4,60.1L51.2,61.9L48.2,63.9L48.2,65.2L46.8,65.9L44.1,67.0L42.7,67.2L41.9,69.4L42.5,73.2L42.6,75.7L41.4,78.5L41.4,83.5L39.9,83.6L38.5,85.9L39.4,86.8L36.7,87.7L35.7,89.7L34.6,90.5L31.8,87.8L30.4,83.6L29.3,80.7L28.2,79.3L26.7,76.4L26.0,72.8L25.4,70.9L22.8,66.9L21.5,61.2L20.7,57.4L20.7,53.9L20.1,51.1L15.8,52.9L13.7,52.5L9.9,48.9L11.3,47.9L10.5,46.7L7.0,44.2L9.0,42.3L15.4,42.3L14.9,39.7L13.2,38.3L12.9,36.0L10.9,34.7L14.2,31.6L17.6,31.8L20.7,28.7L22.5,25.7L25.4,22.8L25.3,20.7L27.8,19.0L25.5,17.5L24.4,15.5L23.4,13.0L24.8,11.7L29.3,12.4L32.6,12.0L35.4,9.5L38.6,12.9L38.3,15.3L39.5,16.9L39.4,18.4L37.3,18.0L38.1,21.2L41.0,23.1L45.1,25.1L43.2,26.5L42.1,29.2L44.9,30.3L47.7,31.8L51.5,33.4L55.5,33.8L57.2,35.3L59.5,35.6L63.1,36.3L65.5,36.2L65.8,35.0L65.5,33.2L65.7,31.9L67.5,31.3L67.7,33.6L70.5,35.3L72.3,34.9L74.8,35.1L77.2,35.0L77.4,33.2L76.2,32.2L78.6,31.9L81.3,29.7L84.7,27.8L87.1,28.5L89.2,27.3L90.6,29.1L89.6,30.3L92.8,30.8Z",
  Japan:
    "M73.5,45.3L68.6,50.6L68.7,56.1L66.7,60.4L67.6,63.0L64.8,66.8L58.0,69.3L48.6,69.6L41.0,75.7L37.4,73.7L37.2,69.7L28.0,70.9L21.6,73.4L15.4,73.5L20.8,77.4L17.3,86.5L13.8,88.7L11.2,86.6L12.5,81.8L9.2,80.3L7.0,76.6L12.0,75.0L14.8,71.6L20.2,68.9L24.1,65.2L34.7,63.6L40.4,64.7L46.0,55.3L49.5,57.8L57.4,52.5L60.4,50.4L63.7,43.9L62.8,37.9L65.1,34.5L70.8,33.5L73.7,40.9L73.5,45.3ZM88.0,19.8L91.8,17.5L93.0,23.5L85.1,25.0L80.4,30.3L72.0,26.6L69.1,32.4L63.2,32.5L62.5,27.2L65.1,23.1L70.8,22.8L72.4,15.5L73.9,11.3L80.2,16.8L84.3,18.6L88.0,19.8ZM22.8,75.7L25.7,72.5L28.8,73.2L31.0,70.9L34.9,72.1L35.6,73.9L32.6,77.1L30.4,75.4L27.6,76.7L26.2,79.8L22.7,78.3L22.8,75.7Z",
  China:
    "M16.2,42.3L17.1,41.2L15.8,38.7L18.6,38.2L20.3,35.3L23.1,35.8L23.9,35.2L24.0,33.8L25.1,33.6L26.2,32.7L27.1,33.6L28.3,34.3L30.3,34.8L31.2,36.0L30.7,37.6L32.9,38.4L34.8,38.6L36.5,39.5L38.0,41.0L38.8,41.8L40.3,41.8L43.2,42.1L45.1,41.9L46.5,42.1L48.5,42.9L50.2,42.9L52.5,42.6L54.8,42.1L56.9,42.1L58.5,41.6L59.5,40.8L60.5,40.4L59.8,39.4L60.5,38.5L62.8,38.9L64.2,38.1L66.3,37.6L67.3,36.7L68.3,36.3L70.4,36.1L71.5,36.2L70.3,34.8L69.2,34.3L68.1,34.8L66.8,34.6L65.6,34.2L66.6,32.8L67.3,31.8L69.0,32.3L70.9,31.4L72.2,29.3L73.0,28.1L73.3,27.0L75.1,26.8L76.9,26.7L79.0,27.2L80.3,27.7L81.1,29.1L82.2,30.6L82.7,31.9L85.1,32.4L86.8,33.4L87.3,34.7L89.5,34.7L90.7,34.1L93.0,33.7L92.3,35.0L91.2,37.0L90.3,38.4L88.6,38.2L87.4,38.6L87.8,39.8L87.6,41.5L86.9,42.3L85.9,41.4L83.2,42.8L82.2,43.5L80.6,44.1L79.1,44.8L77.9,45.7L76.0,46.1L74.9,46.8L73.4,47.2L73.9,46.0L75.0,45.0L74.2,44.3L73.0,44.8L71.4,45.8L70.6,46.7L69.2,46.7L69.2,48.3L70.4,48.6L71.5,49.6L73.1,48.6L74.3,49.1L75.5,49.9L73.5,50.3L72.8,51.1L71.5,51.8L70.7,52.7L72.3,53.5L72.8,54.9L73.7,56.2L74.6,57.3L74.6,58.3L74.0,59.4L74.7,61.0L74.3,62.1L72.5,63.8L71.4,65.6L70.1,67.3L68.1,68.6L66.2,69.7L64.6,69.9L63.7,70.5L62.5,70.8L60.5,71.5L59.0,71.7L58.5,73.2L57.4,72.2L55.8,71.2L53.8,71.1L53.3,69.7L52.0,69.5L50.2,69.7L48.8,69.9L47.7,69.9L46.2,70.4L46.4,72.0L45.5,71.1L44.5,71.5L42.8,70.7L43.2,69.5L42.0,68.0L40.5,68.2L40.7,66.5L42.0,65.4L42.1,64.2L42.1,63.1L41.0,62.0L38.6,61.9L38.5,60.4L37.5,61.0L36.3,60.6L34.7,61.5L33.4,62.6L32.3,62.8L30.9,62.3L29.9,62.0L28.2,63.4L28.1,62.3L25.6,62.5L24.0,62.1L22.9,61.5L21.8,61.3L20.5,60.4L19.1,59.5L18.0,59.0L15.5,58.4L14.1,57.5L13.7,56.0L14.7,56.1L14.2,54.7L14.3,53.6L12.8,51.9L10.5,51.4L10.1,50.3L9.1,49.6L8.6,48.4L7.8,47.6L7.0,46.4L8.5,45.1L9.5,44.8L11.0,45.0L11.5,44.1L13.3,44.0L16.0,42.6L16.2,42.3Z",
} as const;

export type CountryKey = keyof typeof countryOutlines;
export const defaultCountries: CountryKey[] = [
  "USA",
  "Brazil",
  "UAE",
  "India",
  "Japan",
  "China",
];

import { Easing, interpolate } from "remotion";

export const WORKFLOW_FPS = 60;
export const WORKFLOW_FRAMES = 2810;
export const WORKFLOW_WIDTH = 1920;
export const WORKFLOW_HEIGHT = 1080;
export const workflowTimeline = [
  { id: "intro", from: 0, to: 132 },
  { id: "campaign-command", from: 132, to: 384 },
  { id: "fetch", from: 384, to: 486 },
  { id: "analysis", from: 486, to: 642 },
  { id: "launch-command", from: 642, to: 753 },
  { id: "geography", from: 753, to: 1008 },
  { id: "tools", from: 1008, to: 1194 },
  { id: "delivery", from: 1194, to: 1320 },
  { id: "launched", from: 1320, to: 1440 },
  { id: "growth-title", from: 1440, to: 1536 },
  { id: "stats-loading", from: 1536, to: 1668 },
  { id: "stats", from: 1668, to: 1884 },
  { id: "change-command", from: 1884, to: 1971 },
  { id: "recommendation", from: 1971, to: 2241 },
  { id: "double-command", from: 2241, to: 2328 },
  { id: "chart", from: 2328, to: 2448 },
  { id: "closing-title", from: 2448, to: 2580 },
  { id: "mark", from: 2580, to: WORKFLOW_FRAMES },
] as const;

export const clamp = (n: number) => Math.max(0, Math.min(1, n));
export const ease = Easing.bezier(0.22, 1, 0.36, 1);
export const smooth = Easing.bezier(0.65, 0, 0.35, 1);
export const ramp = (t: number, from: number, to: number) =>
  clamp((t - from) / Math.max(0.0001, to - from));
export function move(
  t: number,
  from: number,
  to: number,
  a = 0,
  b = 1,
  easing = ease,
) {
  return interpolate(t, [from, to], [a, b], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing,
  });
}
export function typed(text: string, t: number, from: number, to: number) {
  return Array.from(text)
    .slice(0, Math.floor(Array.from(text).length * ramp(t, from, to)))
    .join("");
}

/** Wipe the entire log before the delivery chapter, without a partial hold. */
export const toolRunExit = (t: number) => move(t, 19.35, 19.9, 0, 1, smooth);

/** Continuous camera track; no layout rounding or velocity cut at zoom-in. */
export function recommendationCamera(t: number, length: number) {
  const zoom = move(t, 35.5, 37.15, 0, 1, smooth);
  const scale = 1 + zoom * 0.65;
  const target = move(
    t,
    32.85,
    37.2,
    Math.min(11, length * 0.25),
    Math.max(Math.min(25, length * 0.55), length - 4),
    smooth,
  );
  return { x: 240 - target * 26 * 0.6 * scale, y: 106 + 6 * zoom, scale };
}
export function charCount(text: string, t: number, from: number, to: number) {
  return Array.from(typed(text, t, from, to)).length;
}
export function chapterAt(frame: number) {
  return workflowTimeline.find((shot) => frame >= shot.from && frame < shot.to);
}
export function barHeights(values: number[], progress: number, height: number) {
  const maximum = Math.max(1, ...values);
  return values.map(
    (value) => (Math.max(0, value) / maximum) * height * clamp(progress),
  );
}

export function chartBarGrowth(t: number, index: number) {
  return (
    move(t, 38.78 + index * 0.07, 39.38 + index * 0.11, 0.18, 1) *
    (0.9 + move(t, 39.3, 40.1, 0, 1, smooth) * 0.1)
  );
}

import type { CSSProperties, ReactNode } from "react";
import { Img, Interactive } from "remotion";
import { Caret } from "@/components/remocn/caret";
import { clamp, move, ramp, smooth, typed } from "./motion";

export const mono = '"Roboto Mono", monospace';

export function Center({
  children,
  style,
}: {
  children: ReactNode;
  style?: CSSProperties;
}) {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

export function AccentText({
  text,
  highlight,
  accent,
  fullText = text,
}: {
  text: string;
  highlight?: string;
  accent: string;
  fullText?: string;
}) {
  const index = highlight ? fullText.indexOf(highlight) : -1;
  if (!highlight || index < 0 || index >= text.length) return <>{text}</>;
  return (
    <>
      {text.slice(0, index)}
      <span style={{ color: accent }}>
        {text.slice(index, index + highlight.length)}
      </span>
      {text.slice(index + highlight.length)}
    </>
  );
}

export function XMark({
  size = 52,
  color = "currentColor",
  outline = false,
  progress = 1,
  src,
}: {
  size?: number;
  color?: string;
  outline?: boolean;
  progress?: number;
  src?: string;
}) {
  if (src)
    return (
      <Img
        src={src}
        style={{ width: size, height: size, objectFit: "contain" }}
      />
    );
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      role="img"
      aria-label="Workflow node mark"
    >
      <path
        d="M2 3h7v7H2V3Zm13 11h7v7h-7v-7ZM5 12h2v5h6v2H5v-7Zm6-7h8v7h-2V7h-6V5Z"
        fill={outline ? "none" : color}
        fillRule="evenodd"
        stroke={outline ? color : "none"}
        strokeWidth={0.3}
        pathLength={1}
        strokeDasharray={1}
        strokeDashoffset={1 - clamp(progress)}
      />
    </svg>
  );
}

export function Command({
  text,
  t,
  start,
  finish,
  end,
  size = 18,
  tracking = false,
  entering = true,
}: {
  text: string;
  t: number;
  start: number;
  finish: number;
  end: number;
  size?: number;
  tracking?: boolean;
  entering?: boolean;
}) {
  const written = typed(text, t, start, finish);
  const progress = ramp(t, start - 0.2, start + 0.25);
  const width = entering
    ? move(t, start - 0.2, start + (tracking ? 1.3 : 0.9), 100, 420, smooth)
    : 420;
  const arrowWidth = size * 0.9;
  const gap = size * 0.6;
  const available = Math.max(1, width - 44 - arrowWidth - gap);
  const fade = 1 - move(t, end - 0.18, end);
  return (
    <Center style={{ opacity: fade }}>
      <Interactive.Div
        name="Typed command"
        style={{
          width,
          height: size * 2.5,
          overflow: "hidden",
          position: "relative",
          opacity: entering ? progress : 1,
          fontFamily: mono,
          fontSize: size,
          color: "#e6f1f8",
          whiteSpace: "pre",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: 0,
            border: "0.75px solid #3b536c",
            marginInline: 10,
          }}
        />
        <div
          style={{
            position: "absolute",
            inset: "0 22px",
            display: "flex",
            alignItems: "center",
            gap,
            overflow: "hidden",
          }}
        >
          <span
            style={{
              width: arrowWidth,
              flexShrink: 0,
              fontSize: size * 1.3,
              fontWeight: 500,
              lineHeight: 1,
            }}
          >
            ❯
          </span>
          <div
            style={{
              width: available,
              minWidth: 0,
              height: "100%",
              display: "flex",
              alignItems: "center",
              overflow: "hidden",
            }}
          >
            <span
              style={{
                display: "inline-flex",
                alignItems: "center",
                flexShrink: 0,
                width: "max-content",
                lineHeight: 1.2,
                transform: `translateX(min(0px, calc(${available}px - 100%)))`,
              }}
            >
              <span>{written}</span>
              <Caret
                color="#f5f5f5"
                height={size}
                width={1.8}
                marginLeft={2}
                opacity={
                  t < finish + 0.12
                    ? 1
                    : Math.floor((t - finish) * 2.5) % 2 === 0
                      ? 1
                      : 0
                }
              />
            </span>
          </div>
        </div>
      </Interactive.Div>
    </Center>
  );
}

export function Loading({
  text,
  t,
  start,
  end,
}: {
  text: string;
  t: number;
  start: number;
  end: number;
}) {
  const elapsed = Math.max(0, t - start - 0.45);
  const label = typed(text, t, start, start + 0.55);
  return (
    <Center
      style={{
        opacity: 1 - move(t, end - 0.2, end),
        fontFamily: mono,
        fontSize: 16,
        whiteSpace: "pre",
      }}
    >
      <div style={{ display: "flex", gap: 9, alignItems: "center" }}>
        <svg width={10} height={18} viewBox="0 0 10 18" aria-hidden="true">
          {Array.from({ length: 6 }, (_, i) => (
            <circle
              key={i}
              cx={3 + (i % 2) * 4}
              cy={5 + Math.floor(i / 2) * 4}
              r={0.65}
              fill="#d0d0d0"
              opacity={0.15 + ((Math.floor(t * 12) + i) % 6) / 8}
            />
          ))}
        </svg>
        <span>{label}</span>
        <span
          style={{
            color: "#8198ae",
            fontStyle: "italic",
            opacity: ramp(t, start + 0.6, start + 0.9),
          }}
        >
          {elapsed.toFixed(1)}s
        </span>
      </div>
    </Center>
  );
}

"use client";

import "@fontsource/inter/latin-400.css";
import "@fontsource/roboto-mono/latin-400.css";
import {
  AbsoluteFill,
  Audio,
  Sequence,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
import { resolveWorkflowProps, type WorkflowConsoleProps } from "./content";
import {
  WORKFLOW_FPS,
  WORKFLOW_FRAMES,
  WORKFLOW_HEIGHT,
  WORKFLOW_WIDTH,
} from "./motion";
import { PerformanceChart } from "./scenes/chart";
import {
  CampaignCommand,
  ChangeCommand,
  DoubleCommand,
  Fetch,
  LaunchCommand,
  StatsLoading,
} from "./scenes/commands";
import { Geography } from "./scenes/geography";
import { Intro } from "./scenes/intro";
import { ClosingMark } from "./scenes/mark";
import { Delivery, Recommendation } from "./scenes/responses";
import {
  AnalysisTerminal,
  LaunchedTerminal,
  StatsTerminal,
} from "./scenes/terminal";
import { ClosingTitle, GrowthTitle } from "./scenes/titles";
import { ToolRun } from "./scenes/tools";

export type {
  ChartBar,
  Environment,
  TerminalRow,
  TerminalRun,
  WorkflowConsoleProps,
  WorkflowContent,
} from "./content";
export { workflowBars, workflowContent, workflowEnvironments } from "./content";
export {
  type CountryKey,
  countryOutlines,
  defaultCountries,
} from "./countries";
export {
  WORKFLOW_FPS,
  WORKFLOW_FRAMES,
  WORKFLOW_HEIGHT,
  WORKFLOW_WIDTH,
  workflowTimeline,
} from "./motion";

export function WorkflowConsole(props: WorkflowConsoleProps) {
  const frame = useCurrentFrame();
  const { width, height, fps } = useVideoConfig();
  const scene = resolveWorkflowProps(props);
  const scale = Math.min(width / 480, height / 270);
  const at = (referenceFrame: number) =>
    Math.round((referenceFrame / WORKFLOW_FPS) * fps);
  return (
    <AbsoluteFill
      name="Workflow Console"
      style={{
        background: scene.background,
        color: "#e7e7e7",
        fontFamily: '"Inter", sans-serif',
        overflow: "hidden",
        WebkitFontSmoothing: "antialiased",
      }}
    >
      <div
        style={{
          position: "absolute",
          left: (width - 480 * scale) / 2,
          top: (height - 270 * scale) / 2,
          width: 480,
          height: 270,
          scale,
          transformOrigin: "0 0",
          overflow: "hidden",
        }}
      >
        {/* Explicit instances let Studio expose every scene in the timeline. */}
        <Sequence
          name="intro"
          from={at(0)}
          durationInFrames={at(132) - at(0)}
          layout="none"
        >
          <Intro scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="campaign-command"
          from={at(132)}
          durationInFrames={at(384) - at(132)}
          layout="none"
        >
          <CampaignCommand scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="fetch"
          from={at(384)}
          durationInFrames={at(486) - at(384)}
          layout="none"
        >
          <Fetch scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="analysis"
          from={at(486)}
          durationInFrames={at(642) - at(486)}
          layout="none"
        >
          <AnalysisTerminal scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="launch-command"
          from={at(642)}
          durationInFrames={at(753) - at(642)}
          layout="none"
        >
          <LaunchCommand scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="geography"
          from={at(753)}
          durationInFrames={at(1008) - at(753)}
          layout="none"
        >
          <Geography scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="tools"
          from={at(1008)}
          durationInFrames={at(1194) - at(1008)}
          layout="none"
        >
          <ToolRun scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="delivery"
          from={at(1194)}
          durationInFrames={at(1320) - at(1194)}
          layout="none"
        >
          <Delivery scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="launched"
          from={at(1320)}
          durationInFrames={at(1440) - at(1320)}
          layout="none"
        >
          <LaunchedTerminal scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="growth-title"
          from={at(1440)}
          durationInFrames={at(1536) - at(1440)}
          layout="none"
        >
          <GrowthTitle scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="stats-loading"
          from={at(1536)}
          durationInFrames={at(1668) - at(1536)}
          layout="none"
        >
          <StatsLoading scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="stats"
          from={at(1668)}
          durationInFrames={at(1884) - at(1668)}
          layout="none"
        >
          <StatsTerminal scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="change-command"
          from={at(1884)}
          durationInFrames={at(1971) - at(1884)}
          layout="none"
        >
          <ChangeCommand scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="recommendation"
          from={at(1971)}
          durationInFrames={at(2241) - at(1971)}
          layout="none"
        >
          <Recommendation scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="double-command"
          from={at(2241)}
          durationInFrames={at(2328) - at(2241)}
          layout="none"
        >
          <DoubleCommand scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="chart"
          from={at(2328)}
          durationInFrames={at(2448) - at(2328)}
          layout="none"
        >
          <PerformanceChart scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="closing-title"
          from={at(2448)}
          durationInFrames={at(2580) - at(2448)}
          layout="none"
        >
          <ClosingTitle scene={scene} t={frame / fps} />
        </Sequence>
        <Sequence
          name="mark"
          from={at(2580)}
          durationInFrames={at(2810) - at(2580)}
          layout="none"
        >
          <ClosingMark scene={scene} t={frame / fps} />
        </Sequence>
      </div>
      {props.audioSrc?.trim() ? (
        <Audio
          src={props.audioSrc}
          volume={
            Number.isFinite(props.volume)
              ? Math.max(0, Math.min(1, props.volume ?? 1))
              : 1
          }
        />
      ) : null}
    </AbsoluteFill>
  );
}

export const workflowConsoleConfig = {
  componentName: "WorkflowConsole",
  importPath: "@/components/remocn/templates/workflow-console",
  controls: {
    productName: {
      type: "text-content" as const,
      default: "Workflow Console",
      description: "Product name in the opening title",
    },
    accentColor: {
      type: "color" as const,
      default: "#8ed8f8",
      description: "Result highlights and performance bars",
    },
    backgroundColor: {
      type: "color" as const,
      default: "#0e1b2b",
      description: "Main background",
    },
  },
  durationInFrames: WORKFLOW_FRAMES,
  fps: WORKFLOW_FPS,
  compositionWidth: WORKFLOW_WIDTH,
  compositionHeight: WORKFLOW_HEIGHT,
};

import type { CSSProperties } from "react";
import { useVideoConfig } from "remotion";
import { TypedSplitWipe } from "@/components/remocn/typed-split-wipe";
import type { SceneProps } from "../content";
import { Command } from "../ui";

export function Intro({ scene, t }: SceneProps) {
  const { fps } = useVideoConfig();
  return (
    <>
      <div
        style={
          {
            position: "absolute",
            inset: 0,
            "--font-geist-sans": '"Inter", sans-serif',
          } as CSSProperties
        }
      >
        <TypedSplitWipe
          prefix={scene.content.prefix}
          anchor=""
          suffix={scene.content.product}
          typeFrames={60}
          exitAt={86}
          exitFrames={46}
          wordStagger={8}
          anchorShift={-30}
          fontSize={Math.min(
            26,
            620 /
              Math.max(
                1,
                scene.content.prefix.length + scene.content.product.length + 3,
              ),
          )}
          color="#e6f1f8"
          speed={60 / fps}
        />
      </div>
      {t >= 1.85 ? (
        <Command
          text={scene.content.command}
          t={t}
          start={1.85}
          finish={5.4}
          end={6.4}
          tracking
        />
      ) : null}
    </>
  );
}

import type { SceneProps } from "../content";
import { Command, Loading } from "../ui";

export const CampaignCommand = ({ scene, t }: SceneProps) => (
  <Command
    text={scene.content.command}
    t={t}
    start={1.85}
    finish={5.4}
    end={6.4}
    tracking
  />
);
export const Fetch = ({ scene, t }: SceneProps) => (
  <Loading text={scene.content.fetching} t={t} start={6.4} end={8.1} />
);
export const LaunchCommand = ({ scene, t }: SceneProps) => (
  <Command
    text={scene.content.launchCommand}
    t={t}
    start={10.3}
    finish={11.23}
    end={12.7}
  />
);
export const StatsLoading = ({ scene, t }: SceneProps) => (
  <Loading text={scene.content.statsLoading} t={t} start={25.6} end={27.8} />
);
export const ChangeCommand = ({ scene, t }: SceneProps) => (
  <Command
    text={scene.content.changeCommand}
    t={t}
    start={31}
    finish={32.24}
    end={32.85}
  />
);
export const DoubleCommand = ({ scene, t }: SceneProps) => (
  <Command
    text={scene.content.doubleCommand}
    t={t}
    start={37.35}
    finish={38.05}
    end={38.8}
    size={26}
  />
);

import { Interactive } from "remotion";
import { type SceneProps, type TerminalRun, terminalContent } from "../content";
import { move, ramp, typed } from "../motion";
import { AccentText, Command, mono } from "../ui";

function Terminal({
  scene,
  t,
  run,
  start,
  end,
}: SceneProps & { run: TerminalRun; start: number; end: number }) {
  const rows = scene.terminalRows[run]?.length
    ? scene.terminalRows[run]
    : terminalContent(run, scene.content);
  const local = t - start;
  const departure = move(t, end - (run === "launched" ? 0.15 : 0.65), end);
  return (
    <>
      <Interactive.Div
        name="Campaign terminal"
        style={{
          position: "absolute",
          left: 50,
          top: 36,
          width: 380,
          height: 204,
          padding: "13px 14px 12px",
          boxSizing: "border-box",
          background: "#14263a",
          fontFamily: mono,
          fontSize: 6.4,
          color: "#c1d4e2",
          overflow: "hidden",
          opacity: move(t, start, start + 0.23) * (1 - departure * 0.8),
          translate: `${-departure * 390}px 0px`,
          scale: move(t, start, start + 0.45, 0.92, 1),
          transformOrigin: "50% 60%",
          maskImage:
            "linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            fontSize: 5.5,
            color: "#839bb0",
            height: 20,
          }}
        >
          <span>{scene.content.terminalTitle}</span>
          <span>⌘ K　▥</span>
        </div>
        <div style={{ height: 142, overflow: "hidden" }}>
          {rows.map((row, i) => (
            <div
              key={`${i}-${row.at}`}
              style={{
                minHeight: row.kind === "thought" ? 8 : 12.5,
                marginTop:
                  row.kind === "prompt" && i > 0
                    ? 8
                    : row.kind === "result"
                      ? 5
                      : 0,
                whiteSpace: "pre-wrap",
                overflowWrap: "anywhere",
                lineHeight: "10px",
                color:
                  row.kind === "thought"
                    ? "#718ba1"
                    : row.kind === "note"
                      ? "#96aabd"
                      : row.kind === "result"
                        ? scene.accent
                        : "#c1d4e2",
                fontSize: row.kind === "thought" ? 5 : 6.4,
                opacity: local >= row.at ? 1 : 0,
              }}
            >
              {row.kind === "prompt" ? "❯ " : ""}
              <AccentText
                text={typed(
                  row.text,
                  local,
                  row.at,
                  row.at + (row.kind === "thought" ? 0.05 : 0.28),
                )}
                highlight={row.highlight}
                fullText={row.text}
                accent={scene.accent}
              />
            </div>
          ))}
        </div>
        <div
          style={{
            position: "absolute",
            left: 14,
            right: 14,
            bottom: 25,
            height: 13,
            border: "0.4px solid #3b536c",
            display: "flex",
            alignItems: "center",
            paddingLeft: 5,
            color: "#d8d8d8",
          }}
        >
          ❯
        </div>
        <div
          style={{
            position: "absolute",
            left: 14,
            right: 14,
            bottom: 10,
            display: "flex",
            justifyContent: "space-between",
            fontSize: 4.6,
            color: "#8ba4ba",
          }}
        >
          <span>
            Send enter　Mode tab　History ↑↓　Multiline ⇧↵　Quit ^C　Commands /
          </span>
          <span>[1]</span>
        </div>
      </Interactive.Div>
      {run === "campaign" && t > 10.3 ? (
        <div style={{ opacity: ramp(t, 10.3, 10.7) }}>
          <Command
            text={scene.content.launchCommand}
            t={t}
            start={10.3}
            finish={11.23}
            end={12.7}
          />
        </div>
      ) : null}
      {run === "stats" && t > 31 ? (
        <div style={{ opacity: ramp(t, 31, 31.4) }}>
          <Command
            text={scene.content.changeCommand}
            t={t}
            start={31}
            finish={32.24}
            end={32.85}
          />
        </div>
      ) : null}
    </>
  );
}

export const AnalysisTerminal = (props: SceneProps) => (
  <Terminal {...props} run="campaign" start={8.1} end={10.7} />
);
export const LaunchedTerminal = (props: SceneProps) => (
  <Terminal {...props} run="launched" start={22} end={24} />
);
export const StatsTerminal = (props: SceneProps) => (
  <Terminal {...props} run="stats" start={27.8} end={31.4} />
);

import { Interactive } from "remotion";
import type { SceneProps } from "../content";
import { type CountryKey, countryOutlines } from "../countries";
import { move, ramp, smooth } from "../motion";

const topologyPaths = {
  single: "M15 38h24v24H15ZM61 38h24v24H61ZM39 50h22",
  parallel:
    "M9 38h20v24H9ZM71 12h20v20H71ZM71 68h20v20H71ZM29 50h21V22h21M50 50v28h21",
  cluster:
    "M10 10h22v22H10ZM68 10h22v22H68ZM10 68h22v22H10ZM68 68h22v22H68ZM39 39h22v22H39ZM32 21h18v18M79 32v18H61M21 32v18h18M50 61v18h18M32 79h18",
  canary:
    "M8 37h24v26H8ZM66 12h24v24H66ZM66 64h24v24H66ZM32 50h17V24h17M49 50v26h17M71 20h14M71 28h8",
};

export function Geography({ scene, t }: SceneProps) {
  const local = t - 12.55;
  const selected = scene.useCountries
    ? scene.countries
    : scene.environments.map((item) => item.label);
  // Slide labels through a fixed aperture; the active vector rotates with the slot.
  const travel =
    2 +
    move(t, 13.85, 14.3, 0, -1, smooth) +
    move(t, 14.85, 15.3, 0, 2, smooth) +
    move(t, 15.75, 16.2, 0, -3, smooth);
  const active = Math.floor(travel + 0.5);
  const rotation =
    Math.sin(local * 3.3) * 17 +
    Math.sin(move(t, 13.85, 14.3, 0, Math.PI, smooth)) * 75 +
    Math.sin(move(t, 14.85, 15.3, 0, Math.PI, smooth)) * 75 +
    Math.sin(move(t, 15.75, 16.2, 0, Math.PI, smooth)) * 75;
  const intro = move(local, 0, 0.45);
  const outro = move(t, 16.45, 16.8);
  return (
    <Interactive.Div
      name="Environment carousel"
      style={{
        position: "absolute",
        inset: 0,
        opacity: 1 - outro,
        translate: `0px ${outro * -40}px`,
        perspective: 650,
      }}
    >
      <div
        style={{
          position: "absolute",
          left: 25,
          right: 25,
          top: 117,
          height: 34,
          overflow: "hidden",
          maskImage:
            "linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)",
        }}
      >
        {Array.from({ length: 18 }, (_, item) => {
          const i = item - 4;
          const country =
            selected[
              ((i % selected.length) + selected.length) % selected.length
            ];
          const delta = i - travel;
          return (
            <span
              key={i}
              style={{
                position: "absolute",
                width: 70,
                left: 180 + delta * 66 + Math.sign(delta) * 30,
                textAlign: "center",
                fontSize: 14,
                lineHeight: "30px",
                color: "#9ab0c4",
                opacity:
                  selected.length === 1 || Math.abs(delta) < 0.5 ? 0 : 0.65,
              }}
            >
              {country}
            </span>
          );
        })}
      </div>
      <div
        style={{
          position: "absolute",
          left: move(local, 0, 0.45, 80, 175),
          top: move(local, 0, 0.45, 110, 67),
          width: move(local, 0, 0.45, 320, 130),
          height: move(local, 0, 0.45, 48, 130),
          border: "0.8px solid #3b536c",
          borderRadius: move(local, 0, 0.45, 0, 14),
          boxShadow: "0 0 0 2px #ffffff03",
          background: scene.background,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: scene.useCountries ? 9 : "8px 16px 28px",
            opacity: intro,
            transform: `rotateY(${rotation}deg) rotateX(${-10 + Math.sin(local) * 5}deg) rotateZ(-8deg)`,
            transformStyle: "preserve-3d",
          }}
        >
          {[0, 1, 2].map((layer) => (
            <svg
              key={layer}
              viewBox="0 0 100 100"
              style={{
                position: "absolute",
                inset: 0,
                width: "100%",
                height: "100%",
                translate: `${layer * 0.8}px ${layer * 0.8}px`,
              }}
              aria-label={selected[active % selected.length]}
              role="img"
            >
              <path
                d={
                  scene.useCountries
                    ? countryOutlines[
                        selected[active % selected.length] as CountryKey
                      ]
                    : topologyPaths[
                        scene.environments[active % scene.environments.length]
                          .topology
                      ]
                }
                fill="none"
                stroke={layer ? "#3b536c" : scene.accent}
                strokeWidth={
                  scene.useCountries ? (layer ? 0.16 : 0.32) : layer ? 0.7 : 1.4
                }
                opacity={layer ? 0.7 : 0.65}
              />
            </svg>
          ))}
        </div>
        {!scene.useCountries ? (
          <div
            style={{
              position: "absolute",
              bottom: 8,
              width: "100%",
              textAlign: "center",
              color: scene.accent,
              fontSize: 10,
              opacity: intro,
            }}
          >
            {selected[active % selected.length]}
          </div>
        ) : null}
      </div>
      <div
        style={{
          position: "absolute",
          top: 213,
          width: "100%",
          textAlign: "center",
          color: "#e5e5e5",
          fontSize: 18,
          letterSpacing: "-0.035em",
          opacity: ramp(local, 0.15, 0.5),
        }}
      >
        {scene.content.geography}
      </div>
    </Interactive.Div>
  );
}

import { Interactive } from "remotion";
import type { SceneProps } from "../content";
import { move, toolRunExit, typed } from "../motion";
import { mono } from "../ui";

export function ToolRun({ scene, t }: SceneProps) {
  const local = t - 16.8;
  const exit = toolRunExit(t);
  return (
    <Interactive.Div
      name="Tool execution log"
      style={{
        position: "absolute",
        left: 85,
        top: 54,
        width: 320,
        height: 173,
        background: "#14263a",
        boxSizing: "border-box",
        padding: "24px 26px",
        color: "#a0a0a0",
        fontFamily: mono,
        fontSize: 10.5,
        lineHeight: "16px",
        opacity: move(local, 0, 0.22) * (1 - exit),
        clipPath: `inset(${exit * 100}% 0 0 0)`,
        scale: move(local, 0, 2.5, 0.93, 1.02),
      }}
    >
      {scene.tools.map((text, i) => (
        <div
          key={text}
          style={{
            opacity: local >= i * 0.15 ? 1 : 0,
            whiteSpace: "nowrap",
            color: i === 1 || i === 3 || i === 6 ? "#8198ae" : "#b9ccdc",
          }}
        >
          <span style={{ color: "#bababa", marginRight: 7 }}>◆</span>
          {typed(text, local, i * 0.15, i * 0.15 + 0.43)}
        </div>
      ))}
    </Interactive.Div>
  );
}

import { Interactive } from "remotion";
import type { SceneProps } from "../content";
import { move, ramp, recommendationCamera, typed } from "../motion";
import { AccentText, mono } from "../ui";

export function Delivery({ scene, t }: SceneProps) {
  const c = scene.content;
  const full = `${c.campaign} is ${c.delivery} -`;
  return (
    <Interactive.Div
      name="Release rollout response"
      style={{
        position: "absolute",
        top: 115,
        left: move(t, 19.5, 21.7, 155, 70),
        fontFamily: mono,
        fontSize: 18,
        lineHeight: "25px",
        color: "#e6e6e6",
        width: 560,
        opacity: 1 - move(t, 21.75, 22),
        maskImage: "linear-gradient(90deg,#000 20%,transparent 90%)",
      }}
    >
      <div style={{ whiteSpace: "pre" }}>
        <AccentText
          text={typed(full, t, 19.8, 20.35)}
          fullText={full}
          highlight={c.delivery}
          accent={scene.accent}
        />
      </div>
      <div style={{ color: "#9ab0c4", opacity: 0.85, whiteSpace: "pre" }}>
        {typed(c.deliveryDetail, t, 20, 20.8)}
      </div>
    </Interactive.Div>
  );
}

export function Recommendation({ scene, t }: SceneProps) {
  const c = scene.content;
  const full = c.recommendation;
  const camera = recommendationCamera(t, Array.from(full).length);
  const budget = `${c.budgetLabel}: ${c.oldBudget} → ${c.newBudget}.`;
  return (
    <Interactive.Div
      name="Pipeline recommendation"
      style={{
        position: "absolute",
        left: 0,
        top: 0,
        fontFamily: mono,
        fontSize: 26,
        lineHeight: "37px",
        width: 1800,
        color: "#e9e9e9",
        transform: `translate3d(${camera.x}px, ${camera.y}px, 0) scale(${camera.scale})`,
        willChange: "transform",
        transformOrigin: "0 0",
        whiteSpace: "pre",
        opacity: 1 - move(t, 37.15, 37.35),
      }}
    >
      <div>
        <AccentText
          text={typed(full, t, 32.85, 33.9)}
          fullText={full}
          accent={scene.accent}
        />
      </div>
      <div style={{ color: "#9ab0c4", opacity: 1 - ramp(t, 35.9, 36.7) }}>
        <AccentText
          text={typed(budget, t, 33.35, 34.6)}
          fullText={budget}
          highlight={c.newBudget}
          accent={scene.accent}
        />
      </div>
    </Interactive.Div>
  );
}

import { Interactive } from "remotion";
import type { SceneProps } from "../content";
import { move, typed } from "../motion";
import { Center } from "../ui";

export function GrowthTitle({ scene, t }: SceneProps) {
  const text = scene.content.growth;
  const parts = text.split(" ");
  const last = parts.pop() ?? text;
  const prefix = parts.join(" ");
  const exit = move(t, 25.1, 25.6);
  return (
    <Center>
      <Interactive.Div
        name="Grow your performance"
        style={{
          fontSize: Math.min(26, 700 / Math.max(1, text.length)),
          letterSpacing: "-0.04em",
          color: "#eeeeee",
          whiteSpace: "pre",
        }}
      >
        {t < 25.1 ? (
          typed(text, t, 24, 24.48)
        ) : (
          <>
            <span
              style={{
                display: "inline-block",
                clipPath: `inset(0 ${exit * 100}% 0 0)`,
              }}
            >
              {prefix}{" "}
            </span>
            <span
              style={{
                display: "inline-block",
                clipPath: `inset(0 0 0 ${move(t, 25.56, 25.6) * 100}%)`,
                translate: `${exit * -60}px 0px`,
              }}
            >
              {last}
            </span>
          </>
        )}
      </Interactive.Div>
    </Center>
  );
}

export function ClosingTitle({ scene, t }: SceneProps) {
  return (
    <Center>
      <Interactive.Div
        name="Stay in the loop"
        style={{
          color: "#eeeeee",
          fontSize: Math.min(
            31,
            710 / Math.max(1, scene.content.closing.length),
          ),
          letterSpacing: "-0.04em",
          whiteSpace: "pre",
        }}
      >
        {typed(scene.content.closing, t, 40.8, 41.5)}
      </Interactive.Div>
    </Center>
  );
}

import { Interactive } from "remotion";
import type { SceneProps } from "../content";
import { barHeights, chartBarGrowth, move } from "../motion";

export function PerformanceChart({ scene, t }: SceneProps) {
  const bars = scene.bars;
  const heights = barHeights(
    bars.map((bar) => bar.value),
    1,
    117,
  );
  const width = 286 / bars.length;
  const exit = move(t, 40.7, 40.8);
  return (
    <Interactive.Div
      name="Performance chart"
      style={{
        position: "absolute",
        left: 76,
        top: 44,
        width: 330,
        height: 189,
        background: "#14263a",
        opacity: move(t, 38.8, 39),
        transform: `translate3d(0, 0, 0) scale(${move(t, 38.8, 40.4, 0.88, 1.05)})`,
        willChange: "transform",
        transformOrigin: "50% 65%",
        overflow: "hidden",
        clipPath: `inset(0 ${exit * 100}% 0 0)`,
      }}
    >
      <div
        style={{
          position: "absolute",
          top: 15,
          left: 15,
          color: "#dedede",
          fontSize: 8,
        }}
      >
        {scene.content.chartTitle}
      </div>
      <div
        style={{
          position: "absolute",
          left: 16,
          right: 16,
          bottom: 17,
          display: "flex",
          alignItems: "flex-end",
          gap: 3,
          height: 126,
        }}
      >
        {bars.map((bar, i) => {
          const growth = chartBarGrowth(t, i);
          return (
            <div
              key={`${bar.label}-${i}`}
              style={{
                position: "relative",
                flex: 1,
                minWidth: 0,
                height: heights[i],
                color: i === 0 ? "#a0a0a0" : scene.background,
                overflow: "hidden",
                clipPath: `inset(${(1 - growth) * 100}% 0 0 0)`,
              }}
            >
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  background: i === 0 ? "#3a526a" : scene.accent,
                  boxShadow: "inset 0 1px #ffffff30",
                  transform: `translate3d(0, 0, 0) scaleY(${growth})`,
                  transformOrigin: "50% 100%",
                  willChange: "transform",
                }}
              />
              <div
                style={{
                  padding: "5px 4px",
                  fontSize: Math.min(6.5, width / 9),
                  whiteSpace: "nowrap",
                  transform: `translate3d(0, ${heights[i] * (1 - growth)}px, 0)`,
                  willChange: "transform",
                }}
              >
                {bar.label}
              </div>
              <div
                style={{
                  position: "absolute",
                  left: 4,
                  bottom: 4,
                  fontSize: 5.8,
                }}
              >
                {bar.detail}
              </div>
            </div>
          );
        })}
      </div>
    </Interactive.Div>
  );
}

import { Interactive } from "remotion";
import type { SceneProps } from "../content";
import { move, ramp } from "../motion";
import { Center, XMark } from "../ui";

export function ClosingMark({ scene, t }: SceneProps) {
  const resolve = move(t, 44.5, 44.72);
  return (
    <Center style={{ background: scene.background }}>
      <Interactive.Div
        name="Workflow node mark"
        style={{
          position: "relative",
          width: 100,
          height: 100,
          scale: move(t, 43, 46.2, 1, 0.48),
          opacity: 1 - move(t, 45.55, 46.45),
        }}
      >
        {[0, 1, 2].map((layer) => (
          <div
            key={layer}
            style={{
              position: "absolute",
              inset: 0,
              opacity: (1 - resolve) * (layer === 0 ? 0.45 : 0.22),
              translate: `${(1 - ramp(t, 43.2, 44.6)) * layer * 5}px 0px`,
            }}
          >
            <XMark
              size={100}
              color={scene.accent}
              outline
              progress={ramp(t, 43.05 + layer * 0.1, 44.25)}
              src={scene.logoSrc}
            />
          </div>
        ))}
        <div style={{ opacity: resolve }}>
          <XMark size={100} color={scene.accent} src={scene.logoSrc} />
        </div>
      </Interactive.Div>
    </Center>
  );
}