Diagrams Over B-Roll

Where the Decision Comes From

I built AI-generated command-center images for a section of the content pipeline's reel. They looked polished. On review, the feedback was direct: "instead of this graphic, let's generate another diagram explainer — I really like that org-chart rendering; do similar things but DIFFERENT EXPRESSIONS based on the topic."

That feedback contains the entire principle. For explanatory beats, a bespoke animated diagram beats AI b-roll because a diagram answers the actual question the viewer is asking. An image does not.

What We Actually Built

After that feedback, the reel went fully Remotion-rendered: titles, stat cards, and three bespoke diagram components, each expressing its topic with a different visual grammar:

OrgChart — CEO node at the top, branching down through C-suite to teams. The visual shape is a hierarchy. The topic is "structure." The diagram is the argument.

ChaosNodes — 23 nodes scattered across the frame, connected by tangled lines crossing each other. The visual shape is disorder. The topic is "unstructured agents = chaos." One glance communicates what a paragraph of explanation can't.

SpendingLimit — per-agent budget bars, each halting at a shared horizontal cap line. The visual shape is constraint. The topic is "nobody drains the account." The cap line is the rule made visible.

Three different visual expressions for three different topics. That is the point. A command-center AI image would look similar for all three — same mood, same palette, same generic "technology" signal. The diagrams are distinct because the topics are distinct.

The Decision Table

The Math.random() Rule

This is the hardest-earned lesson from building Remotion diagrams, and it trips everyone the first time.

Remotion renders each frame independently. When you export a video, Remotion may spin up parallel workers — each worker renders a range of frames. If your component calls Math.random() to scatter nodes, the worker rendering frame 1 gets different random numbers than the worker rendering frame 30. Nodes appear in different positions on different frames. The result is flickering — and the render is non-reproducible.

The fix is deterministic positioning. Here is the pattern we use for ChaosNodes:

// Deterministic golden-angle scatter — same result for same index, always
const goldenAngle = 137.508

function nodePosition(index: number, total: number) {
  const r = Math.sqrt(index / total) * 180  // radial distance
  const theta = index * goldenAngle          // angle in degrees
  const rad = (theta * Math.PI) / 180
  return {
    x: 320 + r * Math.cos(rad),
    y: 240 + r * Math.sin(rad),
  }
}

The layout looks random — nodes are spread irregularly across the frame. But every call with index=7 returns the same x, y coordinates. Frame 1 and frame 30 and frame 300 are identical. No flicker. No non-reproducibility.

The rule extends beyond scatter layouts. Any value that influences visual position, size, opacity, or timing must be derived deterministically. Date.now(), Math.random(), and any external state that changes between frames will break your render.

When B-Roll Is Correct

This lesson is not "never use b-roll." It is "use b-roll for the right beat type."

A tone beat — the opening sequence of a reel that establishes brand mood before the argument starts — is where b-roll earns its place. Atmospheric imagery communicates feeling faster than any diagram can. If your reel opens on a sweeping aerial shot, the viewer knows they are in for a certain kind of experience. That is b-roll doing its job.

For these beats, pull from your existing library before generating anything new. When our Leonardo generate endpoint returned a 403 mid-build, the correct move was to reach into the image library via the API. Those images were built with the same style parameters, they were already on-brand, and they cost nothing. The reel shipped without the generate endpoint ever recovering.

The library is the right fallback because it is already validated. Generated imagery is for mood you don't have yet.

The Full Decision

Beat intent	Visual kind	How to execute
Explain structure, process, mechanism	Bespoke Remotion diagram	Build it; express the topic's shape visually
Headline number	Stat card	Animate the counter or bar; isolate the metric
Tone / atmosphere / transition	B-roll	Pull from library first; generate only if nothing fits

This is the decision you make before writing a single line of component code. What is this beat actually asking the viewer? The answer tells you what to build.

What's Next

The next lesson covers the HeyGen avatar layer: the lip-sync digital twin PiP, the two credit pool trap that burned a full debugging session, and the preflight gate that prevents spending money on a render that was always going to fail.