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:
- Duration — how long the composition runs (
data-duration or config)
- Layers — stacked elements that appear/disappear over time
- Timing —
data-start, data-end, easings, and keyframes per layer
- 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
- Scaffold —
npx hyperframes init and pick a template
- Compose — edit the HTML; add layers, set timing, choose an animation
library. Keep the composition tightly scoped: one scene per file is fine.
- Preview —
npx hyperframes preview for hot-reload
- Lint + inspect — catch timing overlaps and missing assets early
- 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
<!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:
- What's the video for? (title card, demo, explainer, social short)
- How long? (under 15s for social, 30-60s for product, 1-3 min for
explainers)
- Aspect ratio? (16:9 desktop, 9:16 social, 1:1 feed)
- Voiceover or silent? (if voiceover, use
hyperframes-media to
generate TTS)
- Brand assets? (logo, colors, fonts — pull from a brand kit if one
exists)
Once you have those, scaffold and start composing.
1---2name: hyperframes3description: 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.4---56# HyperFrames78HyperFrames is a video-composition framework that lets you build cinematic9compositions in plain HTML/CSS/JS, preview them live, and render them to MP410or GIF. It's like Remotion, but lighter and browser-native.1112## When to use this skill1314Activate whenever the user wants to:1516- Create a video, animation, or motion graphic17- Build a title card, lower third, intro, outro, or scene transition18- Generate an animated explainer, demo reel, or product walkthrough19- Add captions, subtitles, or voiceover to a composition20- Convert a website, blog post, podcast, or talk into a video21- Make an audio-reactive visual22- Render an animated logo or social-media short2324If the user says "video," "animation," "motion," "render," "MP4," or describes25something time-based — this skill is the right call.2627## The CLI2829Everything routes through `npx hyperframes`:3031| Command | Purpose |32| --- | --- |33| `npx hyperframes init` | Scaffold a new composition (Tailwind, blank, or template) |34| `npx hyperframes preview` | Live preview in the browser with hot reload |35| `npx hyperframes lint` | Validate the composition against the schema |36| `npx hyperframes inspect` | Dump the parsed scene graph for debugging |37| `npx hyperframes render` | Produce MP4 / WebM / GIF |38| `npx hyperframes doctor` | Diagnose environment issues (browser, ffmpeg) |39| `npx hyperframes add <block>` | Install a registry block (caption, transition, etc.) |4041Start every new project with `npx hyperframes init` from the user's chosen42working directory. Confirm with the user where to scaffold before running.4344## Core mental model4546A HyperFrames composition is a single HTML file (or small project) that47declares:48491. **Duration** — how long the composition runs (`data-duration` or config)502. **Layers** — stacked elements that appear/disappear over time513. **Timing** — `data-start`, `data-end`, easings, and keyframes per layer524. **Adapters** — bring your own animation library: GSAP, Anime.js, Web53 Animations API, CSS animations, Lottie, Three.js. HyperFrames stays out54 of the way and just orchestrates time.5556The renderer plays the composition deterministically — same input, same57output every time. That's what makes it diff-friendly and AI-friendly.5859## Workflow60611. **Scaffold** — `npx hyperframes init` and pick a template622. **Compose** — edit the HTML; add layers, set timing, choose an animation63 library. Keep the composition tightly scoped: one scene per file is fine.643. **Preview** — `npx hyperframes preview` for hot-reload654. **Lint + inspect** — catch timing overlaps and missing assets early665. **Render** — `npx hyperframes render --format mp4` (or `gif`, `webm`)6768## Companion skills6970When the user's request fits a more specific workflow, lean on the matching71skill — Claude Code will auto-load them when relevant:7273- **website-to-hyperframes** — turn a URL into a video (screenshots → scenes)74- **remotion-to-hyperframes** — port an existing Remotion project75- **hyperframes-media** — TTS narration (Kokoro), Whisper transcription,76 transparent overlays via background removal77- **hyperframes-registry** — install community blocks (lower thirds, VFX,78 transitions, text effects) via `npx hyperframes add`79- Adapter skills: `gsap`, `animejs`, `waapi`, `css-animations`, `lottie`,80 `three`, `tailwind` — patterns for each animation library inside81 HyperFrames8283## Defaults that make life easier8485- Prefer the Tailwind template (`npx hyperframes init --tailwind`) — most86 users want styled compositions and Tailwind makes it fast.87- Default to GSAP for timeline-based animation; WAAPI for simple element88 motion; Lottie for designer-provided JSON animations.89- Render at 1920x1080 @ 30fps unless the user asks otherwise. Vertical90 (1080x1920) for TikTok / Reels / Shorts.91- Always run `npx hyperframes lint` before `render` — catches the 90% of92 bugs that aren't visible in preview.9394## A minimal example9596```html97<!doctype html>98<html data-duration="6000">99 <head>100 <meta charset="utf-8" />101 <link rel="stylesheet" href="https://cdn.tailwindcss.com" />102 </head>103 <body class="bg-black text-white font-sans">104 <div class="absolute inset-0 grid place-items-center"105 data-start="0" data-end="3000">106 <h1 class="text-7xl font-bold tracking-tight">Crest</h1>107 </div>108 <div class="absolute inset-0 grid place-items-center"109 data-start="3000" data-end="6000">110 <p class="text-3xl text-emerald-400">Built for Claude Code</p>111 </div>112 </body>113</html>114```115116That's a six-second, two-scene title sequence. `npx hyperframes preview` to117see it, `npx hyperframes render` to ship the MP4.118119## What to ask the user up front120121Before scaffolding, get answers to:1221231. **What's the video for?** (title card, demo, explainer, social short)1242. **How long?** (under 15s for social, 30-60s for product, 1-3 min for125 explainers)1263. **Aspect ratio?** (16:9 desktop, 9:16 social, 1:1 feed)1274. **Voiceover or silent?** (if voiceover, use `hyperframes-media` to128 generate TTS)1295. **Brand assets?** (logo, colors, fonts — pull from a brand kit if one130 exists)131132Once you have those, scaffold and start composing.
onewave-ai