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.
Install
npx skills add nexu-io/open-design@hyperframesRuns in your terminal. Adds the skill globally for Claude Code, Cursor, Codex and others; add -g -y to skip prompts.
What it 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…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
View source on GitHubBefore you install
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Categories
Related skills
- od-contribute
nexu-io/open-design
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship my OD skill, ship my OD design system, translate OD docs, report an OD bug, od-contribute.
1.4K installs 94KDesign & UIDocumentationAI & agents - dashboard
nexu-io/open-design
|
289 installs 94KDesign & UIReact & Next.jsMarketing - mobile-app
nexu-io/open-design
|
274 installs 94KDesign & UIProductivity - magazine-poster
nexu-io/open-design
|
261 installs 94KDesign & UIProductivityOffice documents - critique
nexu-io/open-design
|
257 installs 94KDesign & UIMarketingAI & agents - docs-page
nexu-io/open-design
|
255 installs 94KDesign & UIDocumentationProductivity