Skip to main content
Install the HyperFrames skills, then ask Codex for a video. Codex writes an HTML project in your folder, opens a live preview, and renders the MP4 on your computer.
This installs the core skills into your user’s shared skills folder, ~/.agents/skills, which Codex reads in every project.

​
Before you start

  • Codex, signed in with your ChatGPT account or an OpenAI API key. Its usage bills to that account.
  • Node.js 22 or newer, and npm.
  • FFmpeg, for rendering MP4 files. Run npx hyperframes doctor to check.

​
Install

Run the command above once. Run it again later to update the skills. To keep the skills with one project instead, run this in the project folder and choose Core Skills and Codex in the picker:
Start a new Codex session after either install. See Install and update agent skills for checking and updating.

​
Ask for your first video

Open Codex in an empty folder and paste:
$hyperframes names the HyperFrames skill. Replace the URL with the page you want the video to show.

​
What happens

  1. Codex reads the HyperFrames guide for your kind of video, such as a product launch or an explainer, and builds the project in your folder. For a longer film that tells a story, it first offers three storylines to pick from.
  2. It checks the project and opens a local preview.
Codex may ask before it runs a command or uses the network. The skills install packages, start a preview server, and run the renderer, so approve those steps for this folder. Watch the first version and say what to change, in the same conversation.

​
Preview and render

To reopen the preview later, run this inside the project folder:
The preview opens in the browser editor, where you can also edit the video by hand. To make the MP4 yourself:
You can also ask Codex to render it.

​
Prefer an app?

The HyperFrames Studio app for Mac and Linux can use Codex as its agent. See Connect your agent. To create inside ChatGPT instead, with nothing installed, use the hosted connector.

​
If something goes wrong

  • Codex does not see the skill. Start a new session, then run npx hyperframes skills check.
  • The render fails. Run npx hyperframes doctor and fix what it reports.
  • Anything else. See Troubleshooting.