How do I install the Render Model Comparison Grid skill?

Run npx skillmds add majiayu000/render-model-comparison-grid in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Render Model Comparison Grid safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Render Model Comparison Grid?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Render Model Comparison Grid free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Render Model Comparison Grid?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Render Model Comparison Grid by majiayu000

Name: Render Model Comparison Grid
Rating: 4.2 (5 reviews)
Author: majiayu000

Render Model Comparison Grid

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.

majiayu000 1080da1 2 files · 5.5 KB Updated Sep 9, 2026 567 repo stars

File contents

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 --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.

---name: render-model-comparison-griddescription: 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.--- # 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.

Frequently asked questions