---
name: hyperframes
description: HyperFrames AI video generation workflow for turning a prompt, launch story, explainer script, product update, or motion graphics brief into deterministic HTML/CSS/JS animation rendered as MP4. Use when the user asks for text-to-video, product release videos, explainers, UI motion graphics, or agent-authored animated videos with HeyGen HyperFrames.
---

# HyperFrames Skill

Use this skill when the user wants an AI-generated short video where an agent writes HTML, CSS, and JavaScript animation and renders it deterministically to MP4.

Upstream full skill: https://github.com/heygen-com/hyperframes
Docs: https://hyperframes.heygen.com
Install full bundle: `npx skills add heygen-com/hyperframes` or `npx skills add heygen-com/hyperframes --all`

## Workflow

1. Clarify target duration, audience, aspect ratio, tone, brand constraints, and required call to action.
2. Convert the request into a compact video plan: scenes, timing, on-screen text, motion direction, and visual system.
3. Prefer deterministic HTML/CSS/JS animation over raster-only generation when text clarity, brand control, or repeatable rendering matters.
4. Keep each scene simple enough to render cleanly: one core idea, one motion focus, and short text.
5. Export or hand off a renderable project and call out where HyperFrames should render the final MP4.

## Good Fits

- Product launch or release-note videos.
- Explainer videos with diagrams, UI callouts, or animated typography.
- SaaS feature walkthroughs and marketing motion graphics.
- Social clips that need consistent brand text and layout.

Install the upstream HyperFrames skill for renderer commands, templates, and the complete 19-skill pack.