Hyperframes with Codex: setup and video editing prompts

This tutorial uses Hyperframes with Codex to add motion graphics and captions to short-form videos. The speaker describes Hyperframes as an open source framework that turns HTML into motion graphics and installs its project files in a desktop folder. The walkthrough uses Codex through the ChatGPT desktop app; Claude Code appears as another supported coding assistant.

Setup starts with a new folder and a request to initialize the project from its GitHub link. The speaker explains the agent instruction files, then asks Codex to create a reusable brand kit for colors, fonts and assets. For transcription, she configures an ElevenLabs API key in a .env file and asks Codex to make ElevenLabs the default engine. She prefers its results to the built-in transcription tool in her own testing. Although the project files sit on her computer, this demonstrated workflow uses an external transcription API.

A five-second test clip introduces the editing process: request short captions without punctuation, specify where graphics should appear and keep the speaker's face clear. Codex's planning mode produces a motion board with timed overlays before implementation. The speaker then shows screenshot-based interface animation, a chat window that types along with speech and a recreation of Canva's Magic Layers scan effect. The examples also show why prompt details matter: an overlay placed in a separate block needs another instruction to move it over the footage.