Write HTML. Render video. Built for agents. Studio Quickstart Showcase Playground Catalog Docs Discord Download the desktop app: macOS · Windows · Linux (.deb) HyperFrames is an open source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows. Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video. Quick Start With an AI coding agent For Claude Code, install the versioned plugin: [安装/使用命令见下方] To enable auto update for the hyperframes marketplace, run claude in a terminal in your project. In Claude Code's terminal UI, run /plugin , then select Marketplaces → hyperframes → Enable auto update . Afterward, use /hyperframes:hyperframes . See the plugin guide for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration. For standalone skills (including OpenCode), use: [安装/使用命令见下方] The picker opens with nothing pre selected — the Core Skills group is all you need; /slideshow , /remotion to hyperframes , /reverse any video , /style sampling and /figma install on demand. Agents and non interactive runs should use npx hyperframes skills update instead — it installs exactly the core set, whereas skills add all installs all 9 published skills. The six repo internal skills under .claude/skills / .agents/skills are excluded by default. For the full published set use npx hyperframes skills . skills add resolves the skills.sh registry blob, which can lag main by hours. npx hyperframes skills update installs from the current main , so reach for it when you need the newest copy of a skill. Run project local installs from your video project's directory. From a HyperFrames checkout, use npx hyperframes skills update for a global install instead: a project local installer target can overlap the tracked skills/ source and overwrite uncommitted