Render Model Comparison Grid

---
name: render-model-comparison-grid
description: Render a 'model comparison grid' video from a config — a fal-style "same prompt, N contenders" showcase — a dark real-DOM stage where per beat a monospace prompt fades in centered, docks to a small top strip, then a labeled 2-4 panel grid (static images OR muted video clips, mixable per cell) staggers in and holds for comparison, plus a minimal end card — frame-stepped via Playwright (video cells are frame-seeked deterministically) and encoded with FFmpeg. Deterministic assembly, FREE (cell media comes from create-image-fal / create-video-fal, music from create-music-elevenlabs), text stays pixel-crisp. Use for the model-comparison-grid format.
status: active
---

# render-model-comparison-grid

Render the 'model comparison grid' format from a config. The signature of this format is a
**"Same prompt. N models."** gauntlet: a dark stage where, per beat, a `PROMPT` eyebrow +
the (condensed) prompt **fades in** centered in monospace and holds readable ~0.8s, then
docks to a small top strip while a **grid of 2-4 labeled panels** staggers in (0.15s apart)
and holds for side-by-side comparison. A persistent model/variant label sits under each
panel; column order is identical on every beat. Ends on a minimal end card (headline +
column names only — **no meta-stats line**).

The grid is **media-agnostic per cell**: any cell is a static image or a **muted video
clip** (i2v outputs, screen recordings), mixable within one beat. Video cells loop during
the hold and are **frame-seeked deterministically** (the renderer awaits each seek), so the
render never depends on wall-clock playback timing.

The renderer itself is FREE/deterministic (Playwright frame-step + FFmpeg). The paid inputs
are separate capabilities: the cell **images** come from `create-image-fal`, the cell
**clips** from `create-video-fal`, and the **music bed** from `create-music-elevenlabs`.
Prompt text and labels are real DOM — never AI-rendered.

Default shape: 5 beats × 4.5s + 2.5s end card = 25.0s @ 1280×720/30fps, all configurable
from one `config.json`.

## Run
build_composition.py --config config.json --output hyperframe.html ; render_seekable_hyperframe.py hyperframe.html master-silent.mp4 <duration> --fps 30 --width 1280 --height 720 — dark stage, staggered grid, deterministic, $0. The config schema is documented at the top of `scripts/build_composition.py`; `scripts/config.example.json` IS the shipped worked example (re-point the cell paths at your own media).

`build_composition.py` validates every cell path and the column count (2-4), infers each
cell's media type from its extension (`.png/.jpg/.jpeg/.webp` → image; `.mp4/.mov/.webm/.m4v`
→ muted video), and emits a self-contained HTML that exposes `window.mediaReady()` +
`window.renderAt(t)`. `render_seekable_hyperframe.py` awaits both, so `<video>` cells seek
to the right frame before each screenshot — never a frozen first frame.

## Contract
- Deterministic + FREE (Playwright frame-step + FFmpeg); no paid calls in this capability.
- Columns = panels-per-beat (2-4); every beat supplies exactly that many cells, same order.
- The template recipe (DB) supplies the config; cell images/clips + music are separate
  capabilities.
- State is computed entirely in `renderAt(t)` — never CSS `animation-delay`/transitions
  (Playwright scrubbing traps delayed animations in pre-state).
- Video cells must decode in the render Chromium (H.264 yes, ProRes no — transcode `.mov`
  ProRes to H.264 first). An images-only grid has no decode dependency.