# Hyperframes

> Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions. Use whenever the user asks to build a video, motion graphic, animated explainer, intro, outro, title card, or convert a website / podcast / talk into a video. HyperFrames is HTML-based — fast iteration, real rendering.

- Skill: `onewave-ai/hyperframes` (Agent Skill)
- Install (CLI): `npx skillmds@latest add onewave-ai/hyperframes`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onewave-ai/hyperframes/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: onewave-ai (https://skillmd.com/u/onewave-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onewave-ai/hyperframes

---


# HyperFrames

HyperFrames is a video-composition framework that lets you build cinematic
compositions in plain HTML/CSS/JS, preview them live, and render them to MP4
or GIF. It's like Remotion, but lighter and browser-native.

## When to use this skill

Activate whenever the user wants to:

- Create a video, animation, or motion graphic
- Build a title card, lower third, intro, outro, or scene transition
- Generate an animated explainer, demo reel, or product walkthrough
- Add captions, subtitles, or voiceover to a composition
- Convert a website, blog post, podcast, or talk into a video
- Make an audio-reactive visual
- Render an animated logo or social-media short

If the user says "video," "animation," "motion," "render," "MP4," or describes
something time-based — this skill is the right call.

## The CLI

Everything routes through `npx hyperframes`:

| Command | Purpose |
| --- | --- |
| `npx hyperframes init` | Scaffold a new composition (Tailwind, blank, or template) |
| `npx hyperframes preview` | Live preview in the browser with hot reload |
| `npx hyperframes lint` | Validate the composition against the schema |
| `npx hyperframes inspect` | Dump the parsed scene graph for debugging |
| `npx hyperframes render` | Produce MP4 / WebM / GIF |
| `npx hyperframes doctor` | Diagnose environment issues (browser, ffmpeg) |
| `npx hyperframes add <block>` | Install a registry block (caption, transition, etc.) |

Start every new project with `npx hyperframes init` from the user's chosen
working directory. Confirm with the user where to scaffold before running.

## Core mental model

A HyperFrames composition is a single HTML file (or small project) that
declares:

1. **Duration** — how long the composition runs (`data-duration` or config)
2. **Layers** — stacked elements that appear/disappear over time
3. **Timing** — `data-start`, `data-end`, easings, and keyframes per layer
4. **Adapters** — bring your own animation library: GSAP, Anime.js, Web
   Animations API, CSS animations, Lottie, Three.js. HyperFrames stays out
   of the way and just orchestrates time.

The renderer plays the composition deterministically — same input, same
output every time. That's what makes it diff-friendly and AI-friendly.

## Workflow

1. **Scaffold** — `npx hyperframes init` and pick a template
2. **Compose** — edit the HTML; add layers, set timing, choose an animation
   library. Keep the composition tightly scoped: one scene per file is fine.
3. **Preview** — `npx hyperframes preview` for hot-reload
4. **Lint + inspect** — catch timing overlaps and missing assets early
5. **Render** — `npx hyperframes render --format mp4` (or `gif`, `webm`)

## Companion skills

When the user's request fits a more specific workflow, lean on the matching
skill — Claude Code will auto-load them when relevant:

- **website-to-hyperframes** — turn a URL into a video (screenshots → scenes)
- **remotion-to-hyperframes** — port an existing Remotion project
- **hyperframes-media** — TTS narration (Kokoro), Whisper transcription,
  transparent overlays via background removal
- **hyperframes-registry** — install community blocks (lower thirds, VFX,
  transitions, text effects) via `npx hyperframes add`
- Adapter skills: `gsap`, `animejs`, `waapi`, `css-animations`, `lottie`,
  `three`, `tailwind` — patterns for each animation library inside
  HyperFrames

## Defaults that make life easier

- Prefer the Tailwind template (`npx hyperframes init --tailwind`) — most
  users want styled compositions and Tailwind makes it fast.
- Default to GSAP for timeline-based animation; WAAPI for simple element
  motion; Lottie for designer-provided JSON animations.
- Render at 1920x1080 @ 30fps unless the user asks otherwise. Vertical
  (1080x1920) for TikTok / Reels / Shorts.
- Always run `npx hyperframes lint` before `render` — catches the 90% of
  bugs that aren't visible in preview.

## A minimal example

```html
<!doctype html>
<html data-duration="6000">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.tailwindcss.com" />
  </head>
  <body class="bg-black text-white font-sans">
    <div class="absolute inset-0 grid place-items-center"
         data-start="0" data-end="3000">
      <h1 class="text-7xl font-bold tracking-tight">Crest</h1>
    </div>
    <div class="absolute inset-0 grid place-items-center"
         data-start="3000" data-end="6000">
      <p class="text-3xl text-emerald-400">Built for Claude Code</p>
    </div>
  </body>
</html>
```

That's a six-second, two-scene title sequence. `npx hyperframes preview` to
see it, `npx hyperframes render` to ship the MP4.

## What to ask the user up front

Before scaffolding, get answers to:

1. **What's the video for?** (title card, demo, explainer, social short)
2. **How long?** (under 15s for social, 30-60s for product, 1-3 min for
   explainers)
3. **Aspect ratio?** (16:9 desktop, 9:16 social, 1:1 feed)
4. **Voiceover or silent?** (if voiceover, use `hyperframes-media` to
   generate TTS)
5. **Brand assets?** (logo, colors, fonts — pull from a brand kit if one
   exists)

Once you have those, scaffold and start composing.