Complex Plane Rotation (Drawn Diagrams + Gameplay)

Legacy CLI walkthrough. This remains useful as a custom Remotion template example, but it is not the primary agent harness path.

This example demonstrates a code template that draws a complex plane diagram in Remotion (top half), while looping gameplay in the bottom half.

It is intended to be:

• offline-friendly (uses --mock for audio + visuals),
• repo-friendly (ships as a self-contained example under fixtures/examples/),
• a clean baseline for adding KaTeX/LaTeX equation rendering later.

Use motion-design-coder when editing the Remotion diagram. The rotation, path draw, labels, and caption-safe hold states should be frame-driven, clamped, and reviewed at representative frames.

Files

• fixtures/examples/complex-plane-rotation/script.json
• fixtures/examples/complex-plane-rotation/template/template.json

Steps

1. Put a gameplay MP4 in your gameplay library:

~/.cm/assets/gameplay/subway-surfers/<any>.mp4

2. Run:

$out = "output/examples/complex-plane-rotation"
mkdir $out -Force | Out-Null

cm audio --mock `
  --input fixtures/examples/complex-plane-rotation/script.json `
  --output "$out/audio.wav" `
  --timestamps "$out/timestamps.json"

cm visuals --mock `
  --input "$out/timestamps.json" `
  --gameplay-style subway-surfers `
  --output "$out/visuals.json"

cm render `
  --input "$out/visuals.json" `
  --timestamps "$out/timestamps.json" `
  --audio "$out/audio.wav" `
  --template fixtures/examples/complex-plane-rotation/template/template.json `
  --allow-template-code `
  --template-deps never `
  --no-hook `
  --output "$out/video.mp4"

Customize

• Split-screen layout is configured in fixtures/examples/complex-plane-rotation/template/template.json via:
  • params.splitScreenRatio
  • params.contentPosition
  • params.gameplayPosition
• Diagram values and timing are configured via:
  • params.diagram.x
  • params.diagram.y
  • params.diagram.rotationStartSec
  • params.diagram.rotationEndSec