HyperFrames — start here

HyperFrames renders video from HTML — a composition is an HTML file whose DOM declares timing with data-* attributes, whose animation runtime is seekable, and whose media playback is owned by the framework.

This skill is the technical how-to-use guide — it is intentionally non-design. For motion / animation recipes, see /hyperframes-motion. For design direction (palettes, typography, frame presets), see /hyperframes-design. Below: a capability map of every HyperFrames topic, a topic guide index for what's in this skill, and an intent router for picking a workflow.

Capability map — the HyperFrames skills

Three skills, one per concern. This one is the technical how-to-use guide. The other two cover design.

You want to…	Skill
How to use HyperFrames — composition contract, CLI dev loop, install registry blocks / components (this skill)	`/hyperframes`
Motion / animation — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js)	`/hyperframes-motion`
Design — palettes, typography, frame presets, beat planning, brand / style decisions (no animation recipes)	`/hyperframes-design`

Topic guide — what's inside this skill