Lesson 3: Building the 6-Across Contact Sheet & 12-Frame Fast-Move Strip

1. The 15-Second Hook

Welcome to Lesson 3 of Flagship 5: Automated Media Engineering & Reference Extraction with FFmpeg & yt-dlp on CodingCat.dev. Today we break down Building the 6-Across Contact Sheet & 12-Frame Fast-Move Strip and see how it powers our deterministic 3D AJ and code-rendered video pipeline.

2. Architecture Mental Model (Visual Diagram)

Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, Contact Sheet and Critic Gate enforce a deterministic frame contract.

3. Show Me the Code (scripts/build-contact-sheet.ts)

import { execFileSync } from "node:child_process";

export function renderContactSheet(mp4Path: string, outPng: string) {
  execFileSync("ffmpeg", [
    "-y", "-i", mp4Path,
    "-vf", "fps=2,scale=320:-1,tile=6x5",
    "-frames:v", "1", outPng,
  ]);
}

In scripts/build-contact-sheet.ts, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized.

4. Production Trade-Off Matrix

When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost.

5. Verdict & AJ Pro-Tip

AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your Contact Sheet setup has zero non-deterministic state leaks.

Adopt Contact Sheet inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue!