Hyperframes Composer

hyperframes-composer

A Claude Code skill that teaches any coding agent how to author and render videos with [HeyGen's HyperFrames](https://github.com/heygen-com/hyperframes) framework — HTML in, deterministic MP4 out.

What this skill does

Wraps the non-obvious rules of the HyperFrames framework (the `class="clip"` visibility requirement, paused GSAP timelines on `window.__timelines`, deterministic-only runtime logic, the example-vs-block registry split, the draft-then-final render loop) into a single skill that Claude Code (or any agent speaking the Claude Skills protocol) can load on demand.

It also ships:

• A production-quality 12-second teaser template (examples/teaser-template.html) that demonstrates kinetic typography, chromatic aberration, Swiss-grid feature cards, a logo shimmer finale, SVG-noise grain, and scene-transition sweep bars — fully deterministic, zero external assets.
• A render-and-verify script (scripts/verify.sh) that lints, draft-renders, and extracts evenly-spaced thumbnails for visual QA in one command.
• Reference files covering every data-* attribute, the complete CLI flag matrix, Docker mode, and the live registry of 50+ examples and blocks.

Install

Drop the skill into Claude Code's user-scoped skills directory:

git clone https://github.com/georgeantonopoulos/hyperframes-composer ~/.claude/skills/hyperframes-composer

Claude Code auto-discovers any directory under `~/.claude/skills/` that contains a `SKILL.md` at its root. Restart your Claude Code session (or open a new project) and the skill will be available — it will trigger on prompts like:

• "create a hyperframes video about X"
• "scaffold a hyperframes project"
• "render this HTML composition to MP4"
• "build a kinetic title sequence"

Use

Once installed, simply describe the video you want in any directory. The skill handles prerequisite checks, scaffolding, composition authoring, the lint → draft render → verify → final render loop,