Agent skill · creative production · nexu-io
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 video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
Why this skill is useful
Provides specific commands and workflows for creating HTML-based video compositions that the AI wouldn't reliably generate on its own.
What it needs
Requires npx installed locally. About 11k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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. OpenDesign integration (load-bearing for this surface) When this skill runs inside OpenDesign (i.e. $ODPROJECTDIR 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 Open Design's deterministic 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. Each generate and each wait call lasts at most ~25s, so the agent shell tool's default ~30s cap never fires. Progress lines from HF (Capturing frame N/M) stream to stderr live throughout the loop. When the render finishes, the last stdout line is {"file": { "name": "<output>", "size": …, "kind": "video", … }} — quote file.name in your reply so the user knows what was produced. Skip the Visual Identity Gate inside OD. The HARD-GATE section below (under "Approach") tells you to read DESIGN.md / visual-style.md or stop and ask 3 mood questions before writing any composition. That gate is for standalone HF projects. OD projects already have their own design-system layer — the user picked their visual direction at project creation time. For an OD test render, default to: dark canvas (#0b0b0f), one warm accent (#ffb76b), one cool accent (#7da4ff), restrained motion. Only ask for stylistic input if the user's prompt is too vague to even pick a subject (very rare). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/hyperframes--f00165