---
name: fradser/hyperframes
source: https://app.decimal.ai/s/fradser-hyperframes@1/SKILL.md
source_sha256: 349646ad2cee
---

# HyperFrames — start here

This skill is a local router for the **HyperFrames** HTML-based video framework,
mirrored from [heygen-com/hyperframes](https://github.com/heygen-com/hyperframes).
The mirrored domain skills live as sub-directories of this folder and are loaded
on demand by name. Based on user intent, read the corresponding sub-skill
`SKILL.md` before executing.

The upstream's authoritative agent guides are mirrored alongside this router
as `UPSTREAM-CLAUDE.md` (full skill catalog, install, maintenance) and
`UPSTREAM-AGENTS.md` (workflow list) — consult them for the canonical upstream
skill descriptions and the `npx skills add` / `npx hyperframes` workflow.

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. The full
authoring contract lives in `hyperframes-core/`; read it before writing
composition HTML.

## Sub-skill Index

| Sub-skill | Directory | Use When |
|-----------|-----------|----------|
| Composition contract | `hyperframes-core/` | Author/edit an HTML composition — `data-*` timing, clips, tracks, sub-compositions, variables. Read before writing composition HTML. |
| CLI dev loop | `hyperframes-cli/` | Run `npx hyperframes` init, add, lint, check, snapshot, preview, render, publish, doctor, cloud/lambda rendering, or troubleshoot the build/render env. |
| Animation | `hyperframes-animation/` | Atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and the runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| Keyframes | `hyperframes-keyframes/` | Seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text, 3D depth, plus `hyperframes keyframes` diagnostics. |
| Creative direction | `hyperframes-creative/` | Non-animation creative direction: `frame.md`/`design.md`, palettes, typography, narration, beat planning, audio-reactive. |
| Media | `media-use/` | Resolve/generate BGM, SFX, image, icon, brand logo, voice, color grade, LUT; TTS voiceover, transcription, background removal, captions; cross-project reuse. |
| Registry blocks | `hyperframes-registry/` | Install and wire registry blocks/components (`hyperframes add`). |
| Figma import | `figma/` | Import Figma content — assets, tokens, components, storyboards → reconstructed motion. |

### Workflows (end-to-end deliverables)

| Workflow | Directory | Use When |
|----------|-----------|----------|
| General video | `general-video/` | Fallback workflow for authoring/editing any custom composition at any length/format — longer/multi-scene pieces, brand and sizzle reels. |
| Motion graphics | `motion-graphics/` | Short, design-led motion graphic where motion IS the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting, lower-third. |
| Slideshow / deck | `slideshow/` | Presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation. |
| Product launch | `product-launch-video/` | Turn a product/marketing URL, pasted script, or brief into a product launch / promo video. |
| PR to video | `pr-to-video/` | Turn a GitHub PR (URL, owner/repo#N, or "this PR") into a code-change explainer video. |
| Music to video | `music-to-video/` | Turn a music track into a beat-synced video — lyric video, slideshow, or kinetic visualization. |
| Faceless explainer | `faceless-explainer/` | Turn arbitrary text (article, notes, topic, brief) into a faceless explainer video with invented visuals. |
| Embedded captions | `embedded-captions/` | Add designed captions to a talking-head video — visual identities behind column-flow/embedded engines. |
| Talking-head recut | `talking-head-recut/` | Package an existing talking-head/interview/podcast video with timed graphic overlay cards — titles, lower-thirds, data callouts, quotes. |
| Remotion port | `remotion-to-hyperframes/` | Port an existing Remotion (React) composition to HyperFrames HTML. Use ONLY on an explicit ask to port/convert/migrate a Remotion source. |

## Routing Rules

1. For any "make me a video / animation / motion graphic" request, pick a
   **workflow** from the second table above. If none fits, fall back to
   `general-video`.
2. The chosen workflow pulls in **domain skills** (first table) mid-flight —
   they never own the end-to-end task themselves.
3. **Authoring contract first**: before writing composition HTML, read
   `hyperframes-core/`.
4. Everything runs through `npx hyperframes` unless project instructions specify
   a local wrapper — obey the local wrapper exactly. Requires Node.js >= 22 and
   FFmpeg.

## Sync

These skills are mirrored from upstream. To check for or pull updates:

```bash
bash hyperframes/scripts/sync-hyperframes.sh --check   # dry-run
bash hyperframes/scripts/sync-hyperframes.sh            # sync with backup
```

See `SYNC.md` for the upstream source, last-synced commit, and sync strategy.