{"slug":"render-model-comparison-grid","title":"render-model-comparison-grid","summary":"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, mixa","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-11T17:23:09.624166Z","repo":{"url":"https://github.com/gooseworks-ai/goose-skills","stars":1222,"forks":208,"license":"MIT","updatedAt":"2026-09-22T18:53:29Z"},"bodyHtml":"<hr>\n<h2>name: render-model-comparison-grid\ndescription: 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.\nstatus: active</h2>\n<h1>render-model-comparison-grid</h1>\n<p>Render the 'model comparison grid' format from a config. The signature of this format is a\n<strong>\"Same prompt. N models.\"</strong> gauntlet: a dark stage where, per beat, a <code>PROMPT</code> eyebrow +\nthe (condensed) prompt <strong>fades in</strong> centered in monospace and holds readable ~0.8s, then\ndocks to a small top strip while a <strong>grid of 2-4 labeled panels</strong> staggers in (0.15s apart)\nand holds for side-by-side comparison. A persistent model/variant label sits under each\npanel; column order is identical on every beat. Ends on a minimal end card (headline +\ncolumn names only — <strong>no meta-stats line</strong>).</p>\n<p>The grid is <strong>media-agnostic per cell</strong>: any cell is a static image or a <strong>muted video\nclip</strong> (i2v outputs, screen recordings), mixable within one beat. Video cells loop during\nthe hold and are <strong>frame-seeked deterministically</strong> (the renderer awaits each seek), so the\nrender never depends on wall-clock playback timing.</p>\n<p>The renderer itself is FREE/deterministic (Playwright frame-step + FFmpeg). The paid inputs\nare separate capabilities: the cell <strong>images</strong> come from <code>create-image-fal</code>, the cell\n<strong>clips</strong> from <code>create-video-fal</code>, and the <strong>music bed</strong> from <code>create-music-elevenlabs</code>.\nPrompt text and labels are real DOM — never AI-rendered.</p>\n<p>Default shape: 5 beats × 4.5s + 2.5s end card = 25.0s @ 1280×720/30fps, all configurable\nfrom one <code>config.json</code>.</p>\n<h2>Run</h2>\n<p>build_composition.py --config config.json --output hyperframe.html ; render_seekable_hyperframe.py hyperframe.html master-silent.mp4 </p>\n<p><code>build_composition.py</code> validates every cell path and the column count (2-4), infers each\ncell's media type from its extension (<code>.png/.jpg/.jpeg/.webp</code> → image; <code>.mp4/.mov/.webm/.m4v</code>\n→ muted video), and emits a self-contained HTML that exposes <code>window.mediaReady()</code> +\n<code>window.renderAt(t)</code>. <code>render_seekable_hyperframe.py</code> awaits both, so <code>&lt;video&gt;</code> cells seek\nto the right frame before each screenshot — never a frozen first frame.</p>\n<h2>Contract</h2>\n<ul>\n<li>Deterministic + FREE (Playwright frame-step + FFmpeg); no paid calls in this capability.</li>\n<li>Columns = panels-per-beat (2-4); every beat supplies exactly that many cells, same order.</li>\n<li>The template recipe (DB) supplies the config; cell images/clips + music are separate\ncapabilities.</li>\n<li>State is computed entirely in <code>renderAt(t)</code> — never CSS <code>animation-delay</code>/transitions\n(Playwright scrubbing traps delayed animations in pre-state).</li>\n<li>Video cells must decode in the render Chromium (H.264 yes, ProRes no — transcode <code>.mov</code>\nProRes to H.264 first). An images-only grid has no decode dependency.</li>\n</ul>\n","files":[{"path":"scripts/build_composition.py","sizeBytes":10504,"isText":true},{"path":"scripts/config.example.json","sizeBytes":3838,"isText":true},{"path":"scripts/render_seekable_hyperframe.py","sizeBytes":2586,"isText":true},{"path":"SKILL.md","sizeBytes":3588,"isText":true},{"path":"skill.meta.json","sizeBytes":333,"isText":true},{"path":"tests/smoke-test.md","sizeBytes":1061,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-11T17:23:46.986892Z","sha256":"01A4FF1ED3D6F238F9154E6CDAEBFED6AFE1BBE9E6D09F75A03E18E3F7DB3D07","sizeBytes":9467},"review":null,"source":{"repositoryUrl":"https://github.com/gooseworks-ai/goose-skills","path":"skills/ads/capabilities/render-model-comparison-grid","license":"MIT","commit":"a9f4676e266f9f04786e3f4145baf931f61fc309","subtreeSha":"980DEA1861BB0070BFFA9B439D083CCA30C5FFB2BD1AA63E670383497A90E78E","lastSyncedAt":"2026-09-24T06:48:52.524221Z"},"reviewedAt":"2026-09-11T17:25:12.863001Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/gooseworks-ai/goose-skills/tree/main/skills/ads/capabilities/render-model-comparison-grid"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install gooseworks-ai-goose-skills@llmmart"},{"target":"git","command":"git clone https://github.com/gooseworks-ai/goose-skills.git"}]}