hyperframes
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full
Profile →npx skills add nexu-io/open-design --skill hyperframes --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Creates HTML-based video compositions including animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. It supports adding captions/subtitles synced to audio, generating text-to-speech narration, audio-reactive animation, animated text highlighting, and various scene transitions. It covers composition authoring, timing, media, and the full video production workflow, with CLI commands (init, lint, preview, render, transcribe, tts).
How it works
Describes an HTML-driven composition approach where a single HTML file with data-* timing attributes, a GSAP timeline, and CSS defines the video. The system can operate inside Open Design (OD), where rendering uses a fixed output path and a hidden cache for source files. The workflow favors using a scaffold via this toolchain (e.g., init to generate hyperframes.json, meta.json, index.html with a pre-registered timeline) and editing only the necessary parts. Rendering is performed by a daemon process via the Open Design tooling, not by running the render command directly in the agent shell. The workflow includes preparing the scaffold, editing data-duration and timelines, and dispatching render through the OD daemon. Additional subcommands (lint, transcribe, tts) are available for validation, caption generation, and narration. The approach emphasizes minimal edits to the scaffold for OD requests and cautions against generating standalone root HTML files with the scaffold unless necessary. The method also includes detailed layout guidelines, including a layout-first approach, GSAP entrances/exits, and careful handling of element positioning to avoid overlaps.
When to use it
Use when tasked with building any HTML-based video content, captions synced to audio, TTS narration, audio-reactive visuals, animated text highlighting, or transitions between scenes. Particularly suitable for Open Design projects where the output should land as a generated MP4 (and not clutter the project root with scaffolding files). Use the scaffold path for rapid results; write from scratch only if the prompt cannot be hosted by the blank template (e.g., multi-composition timelines or audio-reactive overlays that exceed the scaffold).
What it can touch
CLI-based commands include: init, lint, preview, render, transcribe, tts. Rendering flow relies on the OD daemon with commands like npx hyperframes init, npx hyperframes lint, npx hyperframes transcribe, npx hyperframes tts, and OD_NODE_BIN + OD_BIN for media generation and waiting. The skill specifies using the scaffold in .hyperframes-cache/ and editing only the index.html within the composition directory; the actual render is performed via the Open Design daemon, not directly by a local render command.
Caveats
The skill requires using Open Design with a fixed output path for rendered MP4s and stores source files in a hidden cache directory to avoid clutter. It emphasizes following a visual identity gate for standalone HF projects, though OD projects bypass that gate due to project-level design constraints. It warns against placing scaffolding files (hyperframes.json, meta.json, index.html) in the project root. It notes the presence of executable scripts in the folder and provides constraints on when to scaffold versus write from scratch. License: Apache-2.0.
# HyperFrames HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync. ## Open Design integration (load-bearing for this surface) When this skill runs inside Open Design (i.e. `$OD_PROJECT_DIR` is set), the output flow is fixed: only the rendered `.mp4` should land in the project root. Composition source files (`hyperframes.json`, `meta.json`, `index.html`, assets) belong inside a hidden cache directory so they don't clutter the user's FileViewer or the chat's "produced files" chips. **Render workflow inside OD — fast path**: For most OD requests ("test video", "5s product reveal", "demo clip"), do NOT write the composition HTML from scratch. Use HyperFrames' built-in scaffold and edit only what the prompt actually changes. The "author from scratch" path costs minutes of model output and silent chat-tool time; the scaffold path costs seconds. ```bash # 1. Pick a hidden cache slot. Dotfile prefix → OD's project file # listing skips it, so the source files never clutter the chat. COMP_REL=".hyperframes-cache/
- Open Design integration (load-bearing for this surface)
- Approach
- Visual Identity Gate
- Layout Before Animation
- The process
- Example
- When elements share space across time
- What counts as intentional overlap
- Data Attributes
- All Clips
- Composition Clips
- Composition Structure
- Video and Audio
- Timeline Contract
listing skips it, so the source files never clutter the chat. already registered). This runs in your shell — pure file copy, no Chrome, no network beyond the npx cache. npx hyperframes init "$COMP" --example blank --skip-skills --non-interactive if you need a non-default length, swap the placeholder palette in <style>, add 1–3 clip <div>s for text/imagery, and append the matching GSAP tweens inside the existing Keep edits minimal; the scaffold is already valid HF. unsandboxed process. (Many agent CLIs, Claude Code in particular, wrap Bash in macOS sandbox-exec under which puppeteer's Chrome
What does the hyperframes skill do?
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full
How do I install it?
Run `npx skills add nexu-io/open-design --skill hyperframes --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.