Build and use a shell library of reusable motion graphics
ComingRegistry of reusable 1920x1080 HTML/GSAP shells (spec, still, preview, provenance, rules) with builders and beat recipes, rendered to ProRes 4444 alpha plates and placed on Resolve V2+ or composited by HyperFrames.
Kit
shell-library, video-offline-tools
You need
| Account | Why | Free or paid | Plan |
|---|---|---|---|
| HyperFrames (HTML to video renderer) | Renders the shell library and beat graphics (GSAP HTML) to ProRes 4444 alpha plates and full comps. | Free | Free, open source; pinned version in video-editor/package.json. |
| Node.js 24 (npm, npx) | Runs Claude Code, the Vercel CLI, HyperFrames renders, Playwright, the MCP servers and every serverless function locally. | Free | Free. Node 24 LTS (the Brain MCP server and Vercel functions target Node 24). |
| ffmpeg + ffprobe | Every cut, mux, loudness pass, proxy, contact sheet and platform encode. The delivery encoder uses h264_videotoolbox on Apple Silicon. | Free | Free (Homebrew build includes VideoToolbox). |
| Playwright + headless Chrome (and Safari for the final check) | Renders pages to PNG for visual QA, drives the dashboard verification protocol, captures library stills, renders HTML titles and animations offline. | Free | Free. Google Chrome installed for headless screenshots; Playwright installs its own Chromium and WebKit. |
What you bring
- Your brand colours and fonts
- Your copy for each beat on screen
- Your logo, and photos for the picture shells
The steps
- Read the registry and the cross-cutting tendencies
- Choose the family by content, read its rules sheet, pin the sha
- Fill the shell from its spec and measure the subject first
- Render one instance and verify at native size
- Place it and screen the motion
- Promote a new design the same turn, or it does not exist
Get the full playbook
Part of: Install your video editing suite