Skip to content
Unicorn Marketers — UM Toolkit Unicorn Marketers — UM Toolkit UM Toolkit

hyperframes: HTML video, complete

Video Desktop

What it does

Section titled “What it does”

Builds video out of HTML, CSS and GSAP, then renders it to MP4 through headless Chrome and ffmpeg. If you can build a web page, you can build one of these, which is why it is the default stack for motion-graphic ads.

This one skill covers the whole surface: authoring compositions, the CLI (init, preview, render, transcribe, tts, doctor), the registry of prebuilt blocks and components you can install, and GSAP timelines.

What it is good at: title cards, overlays, captions synced to audio, animated text highlighting (marker sweeps, hand-drawn circles, scribbles), stat reveals with count-ups, scene transitions, audio-reactive visuals driven by music, and TTS narration.

Renders are deterministic and free, and text is character-perfect because it is real text.

When to reach for it

Section titled “When to reach for it”
  • Motion-graphic ads of nearly any kind.
  • Classified-style typewriter ads, stat reveals, animated chart races.
  • Captioned reels where the captions must match the audio exactly.
  • Beat-synced animation driven by a music track.
  • You want a cheap iteration loop: change a line, re-render, done.

Let motion-video pick if you are unsure between this and Remotion.

Where it runs

Section titled “Where it runs”
Desktop only

Needs headless Chrome and ffmpeg locally.

How to run it

Section titled “How to run it”

“Build a HyperFrames stat-reveal ad for examplebrand”

Setup, once per project:

Terminal window
npx hyperframes init my-ad
npx hyperframes preview      # live preview on port 8765+
npx hyperframes render       # out to MP4

What it needs from you

Section titled “What it needs from you”
  • ffmpeg installed and on your PATH.
  • Locked copy, brand fonts, logo, colors.
  • An audio file if you want synced captions or beat-driven animation.
  • Aspect ratio. 4:5 is the default for feed; 9:16 for Stories and Reels.

What you get back

Section titled “What you get back”
  • An MP4 at your target ratio.
  • The composition source on disk, so revisions are edits rather than rebuilds.
  • A live preview server while you iterate.

A worked example

Section titled “A worked example”

You: “Captioned reel from this VO track.”

Transcribes the audio to word-level timings, generates the caption composition with per-line timing already matched, applies a marker-sweep highlight on the two words you flagged, renders to 9:16 MP4. Copy change afterward is one line in the source and a re-render, with no re-transcription and no regeneration lottery.

Tips & gotchas

Section titled “Tips & gotchas”
  • Text accuracy is not a concern here. Unlike image models, this renders literal text. Character-perfect, every time.
  • Check ffmpeg first. A missing ffmpeg is the most common failure, and npx hyperframes doctor will tell you.
  • Preview before you render. Rendering is the slow step; previewing is instant.
  • Captions are mandatory on paid social. Most plays are muted.
Section titled “Related skills”

Chosen by motion-video. website-to-video feeds it a captured site. Its sibling stack is remotion. Ad rules apply the same as any other creative.