render-mosaic-grid-reveal
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.
npx skills add gooseworks-ai/goose-skills --skill render-mosaic-grid-reveal --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# render-mosaic-grid-reveal Render the `mosaic-grid-reveal` format from a config. The signature of this format is a **full-bleed N×N mosaic** (default 3×3) of the brand's real product stills that **pops in one tile at a time** (scatter order, ease-out-back "pop"), building the whole grid; the grid then **clears** (scale-up + fade) and a clean end card **builds line-by-line** — the brand's real wordmark, then a small sub-label, then the tagline, then a CTA. Silent by design (a light music bed is muxed separately via `create-music-elevenlabs`). The hook is RANGE — nine maximally-distinct variants show how much choice the brand offers. Everything is a real-DOM HTML scene **frame-stepped** to PNG via Playwright and encoded with FFmpeg, so the wordmark, tile captions, and CTA stay **pixel-crisp** (a video model would smear them). No generative video, no i2v, no AI-rendered text. This capability is **FREE and deterministic** — the only paid step of the format (the music bed) is a separate media cap. ## Inputs (`config.json`) - `width`, `height`, `fps` — canvas + frame rate (default 1080×1920, 30). - `wordmark` — brand logo SVG (full `<svg>` or bare `<path>` markup) or PNG path. Real DOM,
- Inputs (config.json)
- Run
- Rules
python3 scripts/build_html.py --config config.json --out hyperframe.html # emits scene, writes duration_sec back python3 scripts/render.py --config config.json --html hyperframe.html --out master-silent.mp4
What does the render-mosaic-grid-reveal skill do?
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.
How do I install it?
Run `npx skills add gooseworks-ai/goose-skills --skill render-mosaic-grid-reveal --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From gooseworks-ai/goose-skills, a repository with 1,091 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.