# hyperframes-studio

> Claude/Codex skill by [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars · 345k installs · Updated 2026-09-26

Use when building or editing a HyperFrames project that people open in Studio: how the timeline should be laid out so it reads well (one caption track, one element kind per track, every scene a sub-composition) and where captions and key content may sit (safe zones). Don't use for how to perform an individual edit (split, trim, retime, volume, copy, swap): that is \`creator-editing-recipes.md\` in \`/hyperframes-core\`.

Tags: ai, animation, ffmpeg, framework, gsap, html, mcp, puppeteer, rendering, typescript, video

## Install

```sh
git clone https://github.com/heygen-com/hyperframes /tmp/hyperframes && ln -s /tmp/hyperframes/skills/hyperframes-studio ~/.claude/skills/hyperframes-studio
```

## From README

HyperFrames Studio conventions Studio draws one timeline row per top-level element. A project that follows the rules below opens as a short, readable timeline; one that does not opens as a wall of unlabeled rows the user cannot edit. These are conventions for what to build. For how to change a clip, follow /hyperframes-core references/creator-editing-recipes.md and never invent a different form of the same edit. Every scene is a sub-composition The root composition holds only timed hosts, media and audio. Any scene with nested structure (a div containing children, a title with a subtitle, a chart) is its own file loaded with data-composition-src, wiring in references/sub-compositions.md. Nested markup left inside the root does not become a row of its own. It hides inside one opaque row that cannot be trimmed or moved part by part. Author as if a structure lint rejects any violation.

## Links

- HTML page: https://omgskills.com/skills/heygen-com/hyperframes/hyperframes-studio/
- GitHub: https://github.com/heygen-com/hyperframes
- Author: [@heygen-com](https://omgskills.com/library/heygen-com/index.md)

## More from this repo

- [product-launch-video](https://omgskills.com/skills/heygen-com/hyperframes/product-launch-video/index.md) — Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 64k stars
- [canopy-part-title](https://omgskills.com/skills/heygen-com/hyperframes/canopy-part-title/index.md) — Leaves sweep through the frame and part to reveal the headline.
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars
- [captions-overlay](https://omgskills.com/skills/heygen-com/hyperframes/captions-overlay/index.md) — Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that...
   - [@heygen-com](https://omgskills.com/library/heygen-com/index.md) · 53k stars