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](https://github.com/microsoft/winget-cli/releases). 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. |Package|Description| |---|---| |[`hyperframes`](https://github.com/heygen-com/hyperframes/blob/main/packages/cli)|CLI — create, preview, lint, and render compositions| |[`@hyperframes/core`](https://github.com/heygen-com/hyperframes/blob/main/packages/core)|Types, parsers, generators, linter, runtime, frame adapters| |[`@hyperframes/engine`](https://github.com/heygen-com/hyperframes/blob/main/packages/engine)|Seekable page-to-video capture engine (Puppeteer + FFmpeg)| |[`@hyperframes/producer`](https://github.com/heygen-com/hyperframes/blob/main/packages/producer)|Full rendering pipeline (capture + encode + audio mix)| |[`@hyperframes/studio`](https://github.com/heygen-com/hyperframes/blob/main/packages/studio)|Browser-based composition editor UI| |[`@hyperframes/player`](https://github.com/heygen-com/hyperframes/blob/main/packages/player)|Embeddable `` web component| |[`@hyperframes/shader-transitions`](https://github.com/heygen-com/hyperframes/blob/main/packages/shader-transitions)|WebGL shader transitions for compositions| It presents a simple text based menu of options as it installs. Use the up-down arrows on your keyboard to move up and down between the options. I think it says to tap the space bar to toggle the selction on and off. Then you hit Enter to save and go to the next question. Choose Codex if it's not part of the default package. ## HyperFrames Skills HyperFrames ships [skills](https://github.com/vercel-labs/skills) that teach AI agents framework-specific patterns that generic docs don't cover. |Skill|What it teaches| |---|---| |`hyperframes`|HTML composition authoring, captions, TTS, audio-reactive animation, transitions| |`hyperframes-cli`|CLI commands: init, lint, preview, render, transcribe, tts, doctor| |`hyperframes-registry`|Block and component installation via `hyperframes add`| |`website-to-hyperframes`|Capture a URL and turn it into a video — full website-to-video pipeline| |`gsap`|GSAP animation API, timelines, easing, ScrollTrigger, plugins, React/Vue/Svelte, performance| For Codex install the Codex Skills package to get these. ``` 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. |Option|Resolution|Pixels vs 1080p|Render time (est.)|File size (est., 40s H.264)| |---|---|---|---|---| |Keep as-is|1920 × 1080|1×|~1 min|~15 MB| |1440p QHD|2560 × 1440|1.78×|~2 min|~25–35 MB| |**4K UHD**|**3840 × 2160**|**4×**|**~4–5 min**|**~60–90 MB**| |4K DCI|4096 × 2160|4.3×|~5 min|~65–95 MB| ## Documentation [Quickstart](https://hyperframes.heygen.com/quickstart) shows sample prompts Full documentation at **[hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)** — [Quickstart](https://hyperframes.heygen.com/quickstart) | [Guides](https://hyperframes.heygen.com/guides/gsap-animation) | [API Reference](https://hyperframes.heygen.com/packages/core) | [Catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart) ## Power User Examples [Nate Herkelman on LinkedIn - intro to HyperFrames](https://www.linkedin.com/feed/update/urn:li:activity:7451325054296178688?updateEntityUrn=urn%3Ali%3Afs_updateV2%3A%28urn%3Ali%3Aactivity%3A7451325054296178688%2CFEED_DETAIL%2CEMPTY%2CDEFAULT%2Cfalse%29) [Nate's video on how to](https://www.youtube.com/watch?si=CfcSTA5AnUwKh4YE&v=ZNbgOhxhzXg&feature=youtu.be) [Nate's post on adding in a tool to remove stutters and mistakes in your audio](https://www.linkedin.com/posts/nateherkelman_claude-video-editing-just-became-unrecognizable-activity-7452947684446883840-Ox_M?utm_source=share&utm_medium=member_desktop&rcm=ACoAAAB_cSYBLW6QAnmXkDeEVteU9_nfM7xAVs0) [Full video](https://www.youtube.com/watch?si=Xcdhhau4Xvk7T6io&v=Aw3BkmhYu4I&feature=youtu.be)