This tool lets you build beautiful animated slides in HTML from text prompts and render them in MP4 video.

Summary

• This provides step-by-step instructions for installing the Hyperframes HTML slide creation tool onto your computer so that you can use it with text-based commands in ChatGPT Codex, or Claude.
• If you use ChatGPT, the easiest way to do this is through Visual Studio Code with Codex Chat open on the right.
• If you use ClaudeCode, point it to a project folder with a name like “Video Slide Creator” and skip to Install Command Line Package Installer
• You have to install a Command Line Package Installer first, (Homebrew on a Mac, Winget on a PC), and Node.js, an open-source, cross-platform JavaScript runtime environment that allows you to execute JavaScript code outside of a web browser which allows you to run Hyperframes as a local application.

Instructions for ChatGPT Codex

Set up Visual Studio Code

Install Visual Studio Code Install the ChatGPT Codex extension and open it in the right sidebar. Log in to your ChatGPT account. In the left panel file manager, create a folder in your root folder called “Video Slide Creator” Right Click on the folder, Open Terminal Window

Install Command Line Package Installer

For Mac, Install Homebrew

Install Homebrew, which is a command-line package installer, by pasting in this command

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Let it run and complete. You’ll use this to install other packages over time. It needs to be updated periodically. Use the Codex chat window in VSC to help you do this or if you hit errors.

For PC, Install Winget

WinGet (Windows Package Manager) is pre-installed on Windows 11 and modern Windows 10 versions. Access it by typing winget in Terminal, PowerShell, or Command Prompt. If missing, install it by updating “App Installer” in the Microsoft Store or downloading the latest version from the official GitHub releases page.

In Visual Studio Code open a terminal window (In the left sidebar, select your root folder, “Video Slide Creator”, then Right Click on the folder, select Open Terminal Window)

Verify/Run: Type winget --version and press Enter to confirm installation

winget --version

Install Node.js

Hyperframes requires Node.js, which is a powerful development framework that you’ll probably end up using for lots of other things. You need to install it first

In ChatGPT Codex chat type: Install Node.js 22+ It will guide you through installing Node.js

Or

Mac - paste this into terminal

brew install node

PC - paste this into terminal

winget install OpenJS.NodeJS.LTS

Verify the Installation

After the installation is complete, you must restart your terminal (close and reopen it) to update your system’s PATH. Then, run these commands to verify: 

• node -v (Displays the Node.js version)
• npm -v (Displays the npm version, which is included automatically)

Install the Hyperframes package via terminal

Then install HyperFrames from GitHub https://github.com/heygen-com/hyperframes

You do this by pasting this command into terminal

npx skills add heygen-com/hyperframes

Install all the Hyperframes packages.

HyperFrames Skills

HyperFrames ships skills that teach AI agents framework-specific patterns that generic docs don’t cover.

codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets

For Claude they come with the initial install.

Install the FFmpeg video rendering engine

Install the most popular video rendering package (FFmpeg) by pasting this into terminal

On Mac

brew install ffmpeg

On PC

winget install -e --id Gyan.FFmpeg

1. Restart Terminal: Close and reopen your terminal to refresh environment variables so the ffmpeg command is recognized.

• Verify: Type ffmpeg -version to confirm installation.

Add your design book to the folder

Copy your brand design book into the “Video Slide Creator”

Choose source content and place it in the folder. It could be

• A text file you dictated
• A text file of notes or a script
• A webpage URL

You could try with other sources like PowerPoint, PDF, Word documents, but I haven’t tried that yet. I’ve tried a text file of dictation and a web page, and both were successful.

Prompts

In the Codex Chat in VSC enter a prompt like

Using /hyperframes, create a video slideshow using content from [filename] and use /Design Book as the template for design and styling

Using /hyperframes, create a sample sales video slideshow using content off the [insert URL] web page and use "Design Book" as the template for design and styling. Add at least two slides showing cool sample animations or animated icons

Stylistic direction you could add to your prompt

add liquid glass cards, dynamic elements, and subtitles

You might need to paste the full path to your design book into Codex Chat.

Preview

To preview the output in HTML, type this into Codex Chat:

run hyperframes preview

or paste this into the terminal

npx hyperframes preview

This starts the Hyperframes Studio and opens your composition in the browser. Edits to index.html reload automatically.

Other prompt examples:

• Summarize the attached PDF into a 45-second pitch video using /hyperframes.
• Turn this CSV into an animated bar chart race using /hyperframes.
• Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration.

Iterate — talk to the agent like a video editor

Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.

Add a lower third at 0:03 with my name and title.1

Render to video

The default HyperFrames composition size: is 1920 × 1080 (set by data-width / data-height on the root div — that’s what HyperFrames renders out at by default). You can change it. Ask Codex to help you.

To render above 1080p you need to instruct it to change the composition.

In Codex type

Render at 1440p

or whatever resolution you want.

The estimated render times and file sizes below are specific to a five slide example about 40 seconds long. If you have a lot more slides, then expect render times and file size to be much bigger.

Documentation

Quickstart shows sample prompts

Full documentation at hyperframes.heygen.com/introduction — Quickstart | Guides | API Reference | Catalog

Power User Examples

Nate Herkelman on LinkedIn - intro to HyperFrames Nate’s video on how to

Nate’s post on adding in a tool to remove stutters and mistakes in your audio Full video