65.4K ·GitHub
What is this?
HyperFrames is an open-source framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 videos, designed to be driven by AI coding agents as well as humans.
HyperFrames is an open-source framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 videos, designed to be driven by AI coding agents as well as humans.Is this a CLI tool, a library, or an agent plugin?It is all three: a standalone CLI for local rendering, a set of 21 agent skills that plug into coding agents like Claude Code or Codex, and the rendering engine behind hosted authoring tools.
It is all three: a standalone CLI for local rendering, a set of 21 agent skills that plug into coding agents like Claude Code or Codex, and the rendering engine behind hosted authoring tools.What do I need installed to render locally?You need Node.js 22+ and FFmpeg; the renderer drives headless Chrome to seek each frame before encoding it.
You need Node.js 22+ and FFmpeg; the renderer drives headless Chrome to seek each frame before encoding it.Does skill installation always grab just what I need?No — the interactive picker defaults to a lean core set, but a non-interactive or agent run without the --skill flag installs all 21 published skills instead of just the core ones.
No — the interactive picker defaults to a lean core set, but a non-interactive or agent run without the --skill flag installs all 21 published skills instead of just the core ones.Which coding agents does it work with?It supports Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that implement the skills standard.
It supports Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that implement the skills standard.What is frame.md?frame.md translates a project's existing web design.md system into a DESIGN.md video spec, so an AI agent can compose a promo video using the same brand tokens and rules without guessing at scale for the camera.
frame.md translates a project's existing web design.md system into a DESIGN.md video spec, so an AI agent can compose a promo video using the same brand tokens and rules without guessing at scale for the camera.How does the renderer guarantee the same output every time?The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same HTML input always produces the same video — that's the determinism the framework is built around.
The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same HTML input always produces the same video — that's the determinism the framework is built around.Can rendering run somewhere other than my laptop?Yes — besides local or Docker rendering, HyperFrames can deploy a distributed render stack to AWS Lambda and drive renders remotely from your laptop or CI.
Yes — besides local or Docker rendering, HyperFrames can deploy a distributed render stack to AWS Lambda and drive renders remotely from your laptop or CI.Which animation runtimes can I use inside the HTML?GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter — all wired for seekable, frame-accurate animation.
GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter — all wired for seekable, frame-accurate animation.What are similar projects?brag, framefields, eian-riso-broll, agentic-product-demo, open-edit, Skills, herk-edit-kit, agentmemory
brag, framefields, eian-riso-broll, agentic-product-demo, open-edit, Skills, herk-edit-kit, agentmemoryWhich topics is it in?headless-browser, puppeteer, gemini-cli, rendering, ffmpeg, video-generation, cursor, video, animation, html, agent-skills, codex
headless-browser, puppeteer, gemini-cli, rendering, ffmpeg, video-generation, cursor, video, animation, html, agent-skills, codex