{"slug":"render-mosaic-grid-reveal","title":"render-mosaic-grid-reveal","summary":"Render a 'mosaic-grid-reveal' video from a config — a real-DOM FULL-BLEED N×N mosaic of real product tiles that pops in one tile at a time (scatter order, ease-out-back overshoot), the grid clears, then the brand wordmark builds line-by-line followed by a sub-label, tagline, and ","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-11T17:23:09.791938Z","repo":{"url":"https://github.com/gooseworks-ai/goose-skills","stars":1229,"forks":211,"license":"MIT","updatedAt":"2026-10-01T15:06:43Z"},"bodyHtml":"<hr>\n<h2>name: render-mosaic-grid-reveal\ndescription: Render a 'mosaic-grid-reveal' video from a config — a real-DOM FULL-BLEED N×N mosaic of real product tiles that pops in one tile at a time (scatter order, ease-out-back overshoot), the grid clears, then the brand wordmark builds line-by-line followed by a sub-label, tagline, and CTA; frame-stepped via Playwright and encoded with FFmpeg — deterministic assembly, FREE (the music bed comes from create-music-elevenlabs), so the wordmark, tile captions, and CTA stay pixel-crisp. Use for the mosaic-grid-reveal format.\nstatus: active</h2>\n<h1>render-mosaic-grid-reveal</h1>\n<p>Render the <code>mosaic-grid-reveal</code> format from a config. The signature of this format is a\n<strong>full-bleed N×N mosaic</strong> (default 3×3) of the brand's real product stills that <strong>pops in\none tile at a time</strong> (scatter order, ease-out-back \"pop\"), building the whole grid; the grid\nthen <strong>clears</strong> (scale-up + fade) and a clean end card <strong>builds line-by-line</strong> — the brand's\nreal wordmark, then a small sub-label, then the tagline, then a CTA. Silent by design (a\nlight music bed is muxed separately via <code>create-music-elevenlabs</code>). The hook is RANGE — nine\nmaximally-distinct variants show how much choice the brand offers.</p>\n<p>Everything is a real-DOM HTML scene <strong>frame-stepped</strong> to PNG via Playwright and encoded with\nFFmpeg, so the wordmark, tile captions, and CTA stay <strong>pixel-crisp</strong> (a video model would\nsmear them). No generative video, no i2v, no AI-rendered text. This capability is <strong>FREE and\ndeterministic</strong> — the only paid step of the format (the music bed) is a separate media cap.</p>\n<h2>Inputs (<code>config.json</code>)</h2>\n<ul>\n<li><code>width</code>, <code>height</code>, <code>fps</code> — canvas + frame rate (default 1080×1920, 30).</li>\n<li><code>wordmark</code> — brand logo SVG (full <code>&lt;svg&gt;</code> or bare <code>&lt;path&gt;</code> markup) or PNG path. Real DOM,\nrecolored via <code>palette.ink</code>. Never AI-render it. <code>wordmark_viewbox</code>, <code>wordmark_width</code> tune it.</li>\n<li><code>palette</code> — <code>bg</code> (warm off-white), <code>accent</code> + <code>accent_deep</code> (brand color), <code>ink</code>, <code>cap</code>.</li>\n<li><code>grid</code> — <code>cols</code>/<code>rows</code> (default 3×3), <code>inset</code> (outer margin), <code>gap</code>.</li>\n<li><code>tiles</code> — one per cell (length must equal <code>cols*rows</code>): <code>image</code> (real variant still),\n<code>name</code> (caption), <code>bg</code> (soft pastel echoing the variant), <code>ink</code> (deep caption color).</li>\n<li><code>pop_order</code> — scatter order across cells (default corners → center → edges).</li>\n<li><code>timing</code> — <code>grid_in0</code>, <code>cadence</code>, <code>pop</code>, <code>hold</code>, <code>clear</code> (seconds).</li>\n<li><code>end_card</code> — <code>sub</code>, <code>tagline_top</code>, <code>tagline_bottom</code> (bold), <code>cta</code>, <code>url</code>. Brand's own approved copy only.</li>\n<li><code>eyebrow</code> — optional top kicker held during the grid.</li>\n</ul>\n<p><code>scripts/config.example.json</code> is a filled example (the Pair Eyewear \"RANGE\" worked example);\nthe tile <code>image</code>/<code>wordmark</code> paths are brand inputs bound by the orchestrator at remix time.</p>\n<h2>Run</h2>\n<pre><code>python3 scripts/build_html.py --config config.json --out hyperframe.html   # emits scene, writes duration_sec back\npython3 scripts/render.py --config config.json --html hyperframe.html --out master-silent.mp4\n</code></pre>\n<p><code>build_html.py</code> computes the full timeline and writes <code>duration_sec</code> back into the config so\n<code>render.py</code> (which reads dims/fps/duration from the config) frame-steps <code>window.renderAt(t)</code>\nat <code>fps</code> and FFmpeg-encodes the silent master. Then mux the <code>create-music-elevenlabs</code> bed:\n<code>ffmpeg -i master-silent.mp4 -i bed.wav -map 0:v:0 -map 1:a:0 -c:v copy -c:a aac -shortest out.mp4</code>.</p>\n<h2>Rules</h2>\n<ul>\n<li>FILL the frame — tiles are full-bleed and edge-to-edge, NOT small cards floating in an\nempty margin. Tiles pop in one at a time (scatter order), never all-at-once or static.</li>\n<li>Real wordmark + real product stills only. Never AI-render the logo or text.</li>\n<li>Copy slots are the brand's own approved lines — never invent claims, customers, results,\nprices, or shipping speed.</li>\n<li>Pick the 9 most DISTINCT variants (color-wheel spread) — that IS the RANGE hook.</li>\n</ul>\n","files":[{"path":"scripts/build_html.py","sizeBytes":8996,"isText":true},{"path":"scripts/config.example.json","sizeBytes":2810,"isText":true},{"path":"scripts/render.py","sizeBytes":2601,"isText":true},{"path":"scripts/_shared.js","sizeBytes":950,"isText":true},{"path":"SKILL.md","sizeBytes":4576,"isText":true},{"path":"skill.meta.json","sizeBytes":327,"isText":true},{"path":"tests/smoke-test.md","sizeBytes":1364,"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-10-01T15:25:59.693487Z","sha256":"0C494BA748D074DE8C666A26D75D910180FFB92B3B7E37049EEE39784DBD3A47","sizeBytes":10398},"review":null,"source":{"repositoryUrl":"https://github.com/gooseworks-ai/goose-skills","path":"skills/ads/capabilities/render-mosaic-grid-reveal","license":"MIT","commit":"1ed2c6a51732c38c1adc93705512f2f1ba344aaa","subtreeSha":"CE96652F8E3B8BC97DC3445D162F5CE42FA38692CF1F925FE5D772E04053326C","lastSyncedAt":"2026-10-01T15:23:59.625203Z"},"reviewedAt":"2026-10-01T15:31:18.435685Z","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-mosaic-grid-reveal"},{"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"}]}