Before, making a video meant hunting for footage, learning editing, and adding music — a high-cost process from start to finish. Now with AI, just use the Codex + HyperFrames combo and basic editing and animation can be done in 1 hour. In this post, I’ll share my hands-on tips for making videos with Codex + HyperFrames, so every content creator with similar needs can achieve video editing freedom.
1. What is HyperFrames? Why Use It?
HyperFrames is a code-driven video production framework open-sourced by @HeyGen. With it, you don’t need to open any editing software — just write code and generate videos.
Why is it such a great fit with Codex? Two reasons:
- Writing code is what AI agents excel at, and Codex is currently a top-tier super tool. Just describe the scene you want, and leave the coding to it.
- HyperFrames is built directly with HTML, naturally designed for agents. AI writes HTML smoother than any other format — fewer errors, faster iteration.
So this combo is made for video creation. You describe the scene clearly, Codex writes the code, and HyperFrames renders the final video.
2. How to Set Up HyperFrames in Codex
Basic installation and setup steps:
- Install the Codex App
Download link: https://chatgpt.com/codex/
- Install the HyperFrames plugin
Open the Codex app, click Plugins in the left sidebar.
Search for HyperFrames and tap the '+' sign to add it.
Now you can start creating videos in Codex using HyperFrames' features.
3. Practical Tips
After setup, how do you actually use it? Here are three video production tips.
1. Prompts: Describe the scene clearly — the more specific, the better
A good prompt is all about translating the detailed image in your head into words. Specifically, cover the following:
- Animation type / video type: feature demo, data visualization, launch trailer, social media short, etc.
- Duration and aspect ratio: e.g., 10 seconds, 9:16 for Douyin
- Video goal: one sentence on what this video is about and what the audience should understand
- Visual style: e.g., Apple-style, realistic software UI, minimalist tech vibe, cinematic feel, etc.
- Key elements: required text, icons, products, data, people, asset paths, etc.
- Motion effect requirements: e.g., typewriter effect, fade in/out, zoom transitions, card expansion, camera push-in, etc.
- Audio requirements: e.g., background music, typing sounds, click sounds, voiceover, synced sound effects, etc.
For example, here's a prompt I used for the opening of an iPhone evolution video:
The animation generated directly from that prompt looks like this:
Of course, the first version probably won't be perfect — just tell the agent what to change. Don't make too many changes at once; preview after each tweak, and keep iterating until you're satisfied. When needed, just take a screenshot and mark the problem areas on it — that's way more efficient than plain text feedback.
2. Image Generation: Use the Image Gen skill to create key assets
Making videos usually involves a lot of time preparing visual assets — product shots, cover images, key frames, etc. Codex has built-in GPT Image 2, so you can generate the assets you need right in the project. The results are beautiful and style-controllable. How to trigger: type $image-gen
For example: Use $image-gen's gpt image 2 to generate a front view and a back view of the original iPhone. Refer to official phone images and try to simulate a realistic phone look. Make the images transparent so they can be easily placed on any background.
3. Music Generation: Use AI to create background music directly
Finished the video? What about the music? I recommend Suno (suno.com), an AI music generation site. It offers free daily credits, and each generation gives you 2 different versions of the song. The quality is pretty good overall.
For prompts, be clear about the style and mood you want, e.g., "rhythmic, epic, no vocals". Example:
Result:
Below is the complete iPhone evolution video I made with Codex + HyperFrames — from assets, visuals to music, all done in 1 hour.
The barrier to video editing has been dramatically lowered by AI. If you've got ideas, go give it a try — hand-coding videos is incredibly satisfying.
Finally, feel free to follow me @Saccc_c, I'll keep sharing AI tips and practical tricks.