Xavier Ting AI for the rest of us

HyperFrames

Builds a video out of a web page you can edit.

Why use HyperFrames?

Making a short video usually means an editing app, where the work lives in a timeline nobody else can read and every change is made by hand. HyperFrames takes the opposite route: you write a web page, and it photographs that page frame by frame in a hidden browser, then encodes those frames into a video. The useful part is what that makes possible for an AI assistant, which already writes HTML well and cannot drive a timeline at all. It also renders the same input to the same file every time, so a video can be rebuilt automatically when the numbers behind it change. It is not an editing app and will not replace one for filmed footage: it is for pieces assembled out of text, data and motion.

When should you use HyperFrames?

Reach for it when the video is made of things you already hold as text or data: a product announcement, a chart that animates, release notes over captions, or one template rendered twenty times with different numbers. It suits work you want repeated on a schedule rather than crafted once. Skip it when the job is cutting real footage. Note that rendering runs on your own machine, so a long video takes real time and processing power.

How do you install and use HyperFrames?

  1. Install Node.js version 22 or later from nodejs.org, and FFmpeg using the instructions at ffmpeg.org for your computer. Both are free.
  2. Paste the command below into the Terminal app, the window where you type commands. It creates a new folder called my-video with a working example inside, so nothing you already have is touched.
  3. Move into that folder and run npx hyperframes preview to watch it in a browser while you edit, then npx hyperframes render to write the MP4 file. If you would rather your assistant do the writing, run npx hyperframes skills update inside the folder to teach it the workflow, then ask in plain words for the video you want.
Paste into the Terminal app npx hyperframes init my-video
← Back to the tools