render-photo-grid-card
Render a 'photo-grid promo card' video from a config — a real-DOM card with a FIXED header/footer and a CONTINUOUSLY SCROLLING 2-row grid of MIXED tiles (video clips, product/lifestyle stills, big-serif %-OFF, dark promo-code or CTA) + feature chips, frame-stepped via Playwright with real-time <video> playback and encoded with FFmpeg — deterministic assembly, FREE (the clips + music come from create-video-fal + create-music-elevenlabs), text stays pixel-crisp. Use for the photo-grid-promo-card format.
npx skills add gooseworks-ai/goose-skills --skill render-photo-grid-card --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-photo-grid-card Render the 'photo-grid promo card' format from a config. The signature of this format is a **continuously scrolling 2-row grid** (NOT a static card) under a fixed header (brand wordmark + big headline + sub) and fixed feature chips. The grid-viewport scrolls left across the whole ~10s, edge-faded with a CSS mask, and its tiles are **mixed media**: `video` clips playing inside tiles, `band-product`/`photo` stills, big-serif `pct`/`off` type tiles, and a dark `code` (promo code) or `cta` tile. The renderer itself is FREE/deterministic (Playwright frame-step + FFmpeg). The paid inputs are separate capabilities: the tile **clips** come from `create-video-fal` (i2v of the product heroes, or clips extracted from the brand's own ad corpus) and the **music** from `create-music-elevenlabs`. Text (wordmark, %, code) is real DOM — never AI-rendered. ## Run build_card.py --config config.json --out hyperframe.html ; render.py --config config.json --html hyperframe.html --out master-silent.mp4 — 1080x1920, scrolling grid, deterministic, $0. Clip tiles are driven by FRAME-SWAP, not `<video>`: `render.py` pre-extracts each clip to PNG frames with ffmpeg, preloads them, and
- Run
- Contract
What does the render-photo-grid-card skill do?
Render a 'photo-grid promo card' video from a config — a real-DOM card with a FIXED header/footer and a CONTINUOUSLY SCROLLING 2-row grid of MIXED tiles (video clips, product/lifestyle stills, big-serif %-OFF, dark promo-code or CTA) + feature chips, frame-stepped via Playwright with real-time <video> playback and encoded with FFmpeg — deterministic assembly, FREE (the clips + music come from create-video-fal + create-music-elevenlabs), text stays pixel-crisp. Use for the photo-grid-promo-card format.
How do I install it?
Run `npx skills add gooseworks-ai/goose-skills --skill render-photo-grid-card --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.