Agent Run

$ pnpm dlx shadcn@latest add @remocn/agent-run

Usage

AgentRun is the part of an AI product video that happens after the prompt. The panel shows the prompt someone just sent, a Thinking status over a short plan, then tool calls that resolve one after another while the header timer counts real seconds. Then the answer streams in as markdown, in bursts. It is brand-neutral: neutral surfaces, one accent for the running spinners and the citation chips, and a light or dark theme.

import { Backdrop } from "@/components/remocn/backdrop";
import { AgentRun } from "@/components/remocn/agent-run";
 
export const AgentScene = () => (
  <Backdrop
    fill={{ type: "color", value: "#ececea" }}
    padding={0}
    radius={0}
    shadow=""
  >
    <AgentRun />
  </Backdrop>
);

The component paints no background and centers its panel in the parent. Sizes are reference pixels at a 720px-tall frame. They scale by height / 720, capped so the 800px panel and its margins fit the width. The panel height follows the frame, so square and vertical compositions show more of the run at once. Everything derives from the Remotion frame and the seed, so seeking and rendering are deterministic.

The component uses the system font stack. If your project loads Inter and JetBrains Mono, for example with @remotion/google-fonts, it picks them up.

Your own run

Pass a run: the prompt, a short plan, the tool steps with their real durations in seconds, and the answer as markdown. The answer supports these:

• # and ## headings
• paragraphs
• - bullets
• **bold** and inline code
• [n] citations
• fenced code blocks

getAgentRunDuration(run) returns the composition length. If you also pass seed, compression or speed to the component, pass the same values as the second argument.

import { Composition } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import {
  AgentRun,
  type AgentRunScript,
  getAgentRunDuration,
} from "@/components/remocn/agent-run";
 
const run: AgentRunScript = {
  title: "Pro plan churn",
  prompt: "Which Pro accounts are likely to churn this month?",
  plan: [
    "Pull weekly active seats for every Pro account",
    "Compare them with renewal dates and support load",
  ],
  steps: [
    {
      icon: "database",
      name: "Run SQL",
      detail: "active seats by account, last 60 days",
      duration: 2.6,
    },
    {
      icon: "book",
      name: "Read 9 sources",
      duration: 1.8,
      sources: [
        "CRM notes",
        "Support tickets",
        "Renewal calendar",
        "billing.example.com",
        "Usage report",
        "QBR decks",
        "Churn survey",
        "Seat audit",
        "Pricing page",
      ],
    },
  ],
  answer: [
    "## 14 Pro accounts are at risk",
    "",
    "Active seats fell below 40% on 14 accounts that renew within 30 days [1].",
    "",
    "- 9 of them opened a billing ticket this month [2]",
    "- 3 lost the admin who set up their workspace",
    "",
    "**Next:** send the list to account managers today.",
  ].join("\n"),
};
 
const ChurnScene = () => (
  <Backdrop
    fill={{ type: "color", value: "#0a0a0a" }}
    padding={0}
    radius={0}
    shadow=""
  >
    <AgentRun run={run} theme="dark" accentColor="#22c55e" />
  </Backdrop>
);
 
export const RemotionRoot = () => (
  <Composition
    id="ChurnScene"
    component={ChurnScene}
    durationInFrames={getAgentRunDuration(run)}
    fps={30}
    width={1280}
    height={720}
  />
);

Timing

At 30 fps with the default run, seed={1}, compression={3} and speed={1}:

The answer arrives in chunks of 1–6 tokens that land on whole frames, 1–4 frames apart. Now and then a pause adds 4–7 more frames, and each new markdown block starts on a fresh chunk after a 2–4 frame beat. Each chunk fades in over 5 frames. So the text comes in bursts, never at a constant rate per character. seed changes the rhythm but not the content.

Every line's position is fixed in advance, and content only grows at the bottom. The column follows it with overlapping smoothstep glides of 24 frames, each starting 16 frames before its content arrives. A glide is three quarters done when its line lands, so a burst of new lines lands in view and nothing jumps.

compression sets how many real seconds pass per video second. A tool call lasts duration / compression on screen, clamped to 12–120 frames. The timer always advances by the step's real duration, so the rows and the header agree. agentRunLength is 310, the component's own motion for the default run. getAgentRunDuration(run, { seed, compression, speed }) adds a 45-frame hold and scales the motion by speed.