Skip to content
Get packs

HyperFrames Video Builder

Lets an agent author HTML-based video compositions with animation, captions, TTS narration and transitions

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
15 files

What it does

This skill teaches an AI agent to make short videos by writing them as HTML pages, with timing set by data attributes and motion controlled by a GSAP animation timeline. Once installed, the agent can produce title cards, overlays, synced captions, text-to-speech narration, music-reactive visuals, animated text highlights and scene transitions, then render the result to a video file. It also includes a fast-path workflow for the Open Design app that scaffolds a starter composition and renders it through the app's daemon.

Great for

  • Creators who want quick product reveals, title cards or social clips generated from a text prompt
  • Developers already using HTML and GSAP who want video output from code
  • Marketers producing simple animated explainers with captions or narration

Skip it if

  • Full-length or photoreal video editing, since this works from HTML and motion graphics rather than footage editing (limitation of the approach)
  • Environments where running Chrome-based rendering or executing bundled tooling is not allowed, since rendering launches a headless browser

Try asking

  • “Make a 5-second product reveal on a cream background with slow camera push-in and no text”
  • “Add synced captions to this narration audio and render an mp4”
  • “Create a title card with a marker-sweep highlight under the headline”
  • “Build a beat-synced glow animation that pulses with this music track”
Step-by-step guide: how to use HyperFrames Video BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the Apache-2.0 licence and an attribution note.

    hyperframes.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip hyperframes.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip hyperframes.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give a concrete duration, palette and motion style in your request so the agent can skip clarifying questions
  • Review the lint output and a preview before asking for a full render to save time
  • Keep text overlays minimal for short clips; state explicitly if you want none

What's inside

  • data-in-motion.md
  • house-style.md
  • palettes/bold-energetic.md
  • palettes/clean-corporate.md
  • palettes/dark-premium.md
  • palettes/jewel-rich.md
  • palettes/monochrome.md
  • palettes/nature-earth.md
  • palettes/neon-electric.md
  • palettes/pastel-soft.md
  • palettes/warm-editorial.md
  • patterns.md
  • references/audio-reactive.md
  • references/captions.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.