The argument in one line.
Motion graphics work that used to require a skilled editor can now be produced by describing the animation in plain language to an AI coding tool wired to an open-source animation framework.
Read if. Skip if.
READ IF YOU ARE…
- You make short-form video and want animated captions, UI callouts, or motion graphics without hiring a designer or learning After Effects.
- You already use an AI coding assistant (Codex, Claude Code, or similar) for other tasks and are comfortable pasting a GitHub link and talking through a setup.
- You want a repeatable brand kit (colors, fonts, logo) so every video you generate matches your channel's look automatically.
- You're willing to iterate on prompts (add a 'motion board' planning step) rather than expect a single instruction to nail the result.
SKIP IF…
- You want a polished, zero-setup tool with a GUI — this is a raw open-source framework installed and operated through a coding agent's terminal.
- You're not willing to install and configure a local project folder, an .env file, and a paid transcription API key.
The full version, fast.
HyperFrames is an open-source framework that turns HTML/CSS/JS into motion graphics, and this video shows how to install it from scratch using Codex as the coding agent that reads the project and executes changes. The setup covers a reusable brand kit (colors, fonts, logo swapped into a dedicated folder), an ElevenLabs API key for word-accurate transcription (used to time every animation), and a first test project. Three finished examples follow: animating a screenshot UI, mimicking a live-typing chat window under a talking-head clip, and recreating Canva's magic-layers scan effect. The core skill isn't coding, it's describing the desired animation precisely enough, and using a 'motion board' planning step before execution to catch missing detail.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:38
01 · Cold open
Creator states the promise: AI now handles animated interfaces, graphic effects, and spatial captions that used to take a skilled editor hours.
00:38 – 01:41
02 · What HyperFrames Is
Searches HyperFrames, shows its official site and open-source GitHub repo, catalog, and documentation as reference material.
01:41 – 03:20
03 · Install HyperFrames with Codex
Creates a fresh desktop folder, opens Codex inside the ChatGPT desktop app, points it at the new folder, and has it initialize the project from the pasted GitHub link.
03:20 – 04:29
04 · Understand the Project Files
Walks the installed file tree: a .agent file for Codex, a CLAUDE.md file for Claude Code, and bundled skills like product-launch videos, embedded captions, and talking-head recuts.
04:29 – 05:46
05 · Create a Reusable Brand Kit
Asks the agent where to put custom brand assets, swaps the default logo/icon, and has it build a separate brand-kit folder holding the creator's own colors and fonts.
05:46 – 08:06
06 · Set Up the ElevenLabs API
Makes ElevenLabs the default speech-to-text engine (over the built-in one) for accurate word timing, generates an API key on the ElevenLabs site, and pastes it into the .env file.
08:06 – 10:48
07 · Create Your First Video Project
Creates a projects folder and a test-project subfolder, drops in a five-second raw clip, and asks the agent to add motion graphic text and subtitles without covering the speaker's face.
10:48 – 12:06
08 · Example 1: Animate Screenshots and Interfaces
Turns on planning mode to get a 'motion board' before executing, then shows the agent animating a provided UI screenshot (toggles switching on, a second-brain interface reveal) directly from the prompt.
12:06 – 12:54
09 · Example 2: Create a Live-Typing Chat Window
Edits a raw landscape clip with blank space by asking the agent to mimic a live-typing chat window underneath the talking-head footage, referencing a screenshot of the real chat UI.
12:54 – 13:54
10 · Example 3: Recreate Canva's Magic Layers Effect
Provides a screenshot of Canva's magic-layers scan effect and has the agent recreate the same layer-selection animation, complete with rectangles around each object, on unrelated video.
13:54 – 14:09
11 · Final Thoughts
Closes by reiterating that the only real skill required is articulating the animation you want, since the framework can now execute almost anything described precisely.
Lines worth screenshotting.
- HyperFrames is an open-source framework that turns HTML, CSS, and JS into motion graphics, meant to be driven by an AI coding agent rather than hand-coded.
- The install step is just pasting a GitHub link into a coding agent and asking it to initialize the project — no manual configuration required.
- The framework ships separate instruction files for different AI tools (a .agent file for Codex, a CLAUDE.md file for Claude Code) so either agent understands the same project.
- A dedicated brand-kit folder holding colors, fonts, and logo files lets every future video request reference the brand by name instead of re-specifying it.
- ElevenLabs is used purely for transcription, not narration, because its word-level timing is accurate enough to place each animation exactly against speech.
- Turning on the coding agent's planning mode before execution produces a 'motion board' — a timestamped list of what will animate when — that surfaces missing detail before anything renders.
- The same technique animates three different source types: a static screenshot, a raw talking-head clip needing an invented on-screen UI, and a video that needs to mimic a specific competitor's effect (Canva's magic layers).
- Precision in the prompt is the entire skill: describing what should animate, when, and what it should avoid covering (like the speaker's face) determines whether the first attempt is usable.
- A single well-specified prompt produced a usable first-pass result on the screenshot-animation example, showing the framework can one-shot simple UI reveals.
- Providing a reference screenshot in the prompt lets the agent replicate an exact visual effect (Canva's layer-selection scan) on unrelated footage.
Motion graphics are now a prompting skill, not an editing skill.
WHAT TO LEARN
An open-source framework wired to an AI coding agent can produce motion graphics on command, but the entire output quality depends on how precisely you describe the animation and plan before executing.
- HyperFrames is an open-source framework that turns HTML/CSS/JS into motion graphics, and it's meant to be operated through an AI coding agent, not hand-coded.
- Installing it is as simple as pasting a GitHub link into a coding agent and asking it to initialize the project from scratch.
- A framework can ship parallel instruction files (one per AI tool) so the same project works identically whether you're driving it with Codex or Claude Code.
- Bundled skills inside a project (captioning, talking-head recuts, product-launch templates) tell you what an AI-driven framework is actually built to automate before you improvise your own use case.
- A dedicated brand-kit folder holding your colors, fonts, and logo lets every future request reference your brand by name instead of re-explaining it each time.
- Swapping the default icon and logo files is often the only manual step needed to re-brand an open-source template end to end.
- Speech-to-text accuracy matters more than voice quality for AI editing pipelines, because word-level timing is what places every animation against the speech.
- Making a specific transcription engine the default (instead of leaving a built-in fallback active) is worth doing explicitly if its output quality differs meaningfully.
- API keys for these pipelines get pasted directly into a project's .env file, not typed into a terminal command, when you want to avoid exposing the secret in shell history.
- Starting a first test project on a short, low-stakes clip lets you validate the entire pipeline before committing a real deliverable to it.
- Explicit constraints in a prompt (don't cover the speaker's face, keep captions short and punctuation-free) are what keep an AI-generated edit usable, not just impressive.
- Turning on an agent's planning mode before execution produces a timestamped 'motion board' that exposes missing detail before you spend a render on it.
- A single well-specified prompt can one-shot a usable animation on a static screenshot, but more openly-creative asks (live-typing windows, competitor effects) benefit from a reference image in the prompt.
- Providing a screenshot of an effect you want copied (a competitor's UI animation, a specific interaction) is a reliable way to get an AI coding agent to replicate it precisely on unrelated footage.
Terms worth knowing.
- HyperFrames
- An open-source framework that converts HTML, CSS, and JavaScript into motion graphics, designed to be operated by an AI coding agent rather than hand-coded by a human.
- Codex
- OpenAI's coding agent, used here inside the ChatGPT desktop app to read a project's files and execute changes based on spoken or typed instructions.
- AIOS
- The creator's own name for her broader AI-driven operating setup, referenced as the folder where her production HyperFrames install normally lives.
- Motion board
- A timestamped plan an AI coding agent produces in planning mode before executing an edit, listing what will animate at each point in the video.
- .env file
- A hidden configuration file where API keys (like an ElevenLabs key) are pasted so a project can authenticate with external services without hardcoding secrets in the code.
- Brand kit folder
- A dedicated subfolder holding a project's reusable brand assets (color palette, fonts, logo) so future requests can reference the brand by name.
Things they pointed at.
02:21toolCodex (ChatGPT desktop app)
06:21toolElevenLabs API
Lines you could clip.
00:05
“Every time I asked it to create something and think it probably can't do it, it won't look good, and somehow it doesn't.”
05:53
“The transcript is so important that it times the exact placement of each animation, so you want to make sure you're using the best tool.”
14:03
“As long as you're able to articulate the type of animation motion graphic that you want, the possibilities are really limitless.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
For the past few months, I've been using AI to edit pretty much all my short form videos, from animating interfaces, adding graphic effects, to creating spatial caption. It is honestly incredible. What blew me away is every time I asked it to create something and think it probably can't do it, it won't look good, and somehow it doesn't.
So what's required from you is just articulate what you want, because now you can create animations in minutes that previously would have taken a highly skilled graphic designer hours to do. So in this video, I'm going to walk you through the initial setup of Hyperframe project. We're going to do this from scratch and i'm also going to show you how i typically start a new project and then i'm going to show you the three examples that i've created the exact prompt i use and the final results let's go First thing we're going to do is search HyperFrames, and this is their official website.
This is their open source project on GitHub. If you click into their official website, you should be able to go to their GitHub open source project from here as well. You can also see they have catalog, documentation.
So all of these are great resources for you to take a look at the capabilities of this open source project to see what are some of the animations, what are some of the caption options that are available for you. So these are really cool to go through as an example. Now, an open source project is basically someone publicly released their source codes, files, instruction onto the web, which means that you can then install this entire project onto your own desktop because AI is so good at coding, you don't need to understand anything that says in here, you just need to install this project onto your own desktop and plug AI in whether it's clock code or codex and AI is able to understand the coding, understand what's going on here and use this as a set of tools to build things for you.
Hyperframes is this open source framework that turns HTML into motion graphic and it's really least by H &N, which is the brand. So to get this set up, all you need to do is copy this link.
So we're going to be using ChatGPT here. I've already installed the ChatGPT desktop app. I like to use Codex when it comes to adding motion graphics because it's...
a lot more token efficient and i really really like the results it's incredible so this is what i'm gonna use so let's set this up from scratch so the first thing you're going to do is to create a brand new folder on your desktop and i'm going to name this hyperframe okay from there you already have your codex installed and then make sure you install your chatgpt desktop app and once that's installed you're just going to toggle to codex and from there let's open up a new chat and down here you can see I'm able to select the folder I want this chat able to access.
So I'm going to choose a new project use existing folder, and I'm going to give it the folder that I've just created so that we can do this from scratch. Because my current hyperframe setup is inside of my AI operating system. And just so that we can all do this for the first time.
And to get the setup, all you need to do is paste in that GitHub link that we just copy and just tell your AI to initialize the project. Can you initialize this project, I have hyperframes that up in a different folder, ignore that, Just pretend you're doing this for the first time inside of this hyperframe folder with me for the first time.
I've been using audio as much as I can, barely typing. As we go through the entire setup process, you can see everything is going to be done by AI. If there's missing something, if it needs to trigger something in the terminal, just talk to it, ask it, what do you want me to do?
What's the comment that you want me to paste? It's able to bring you through that entire setup process pretty seamlessly. It's probably going to take a couple minutes.
We'll check back once it's done. Okay, so everything is initialized. If you toggle, on the side panel, you can click on files, and then you will see everything that being installed inside of that newly created folder, we don't have to understand everything that's happening here.
But just know that this is already created for it to be compatible with any AI. For example, this dot agent is meant to be used with codecs. And dot Claude is meant to be used with cloud code because they have like different preference and terminology with the folder and file that they want to see.
Now this is already embedded inside of here, you can also take a look at your cloud .md file. If you're not familiar with the .md file, it's usually the top level file that Cloud Code will first reach out and read through.
That's kind of like the main map for you to understand, okay, now where do I look for my next step? So this is a high level instruction that it reads first. So similarly, there's another agent .md file, which is what Codex uses.
So everything is already listed in here so that you can use it with any AI. And you can see that it comes with a bunch of skills. So the creation workflow, including creating a product launch video, it can do embedded captions it's able to do talking head recuts and then the other file that is interesting is this design .md file so natively it has a bunch of colors fonts that it uses but i am curious if we want to upload our own design asset where should we put that if i have my own brand asset which file should i update For Codex plugin branding, replace these two icon and logo.
So you can see right now it comes with just the standard Hyperframes logo. And if you're using clock code, then these two are the files that you need to swap out. What about my color fonts that I use for my brand?
It seems that we can create a separate file that is brand specific. And that's where we store our own color pilot type fonts that we want to use. But okay, so I asked it, what's the best way for me to set up a reusable brand kit inside of this folder.
And it gives me the suggestion of creating a separate my brand kit folder. Yes, can you build that for me?
So I'm just going to have it set up that folder inside of our main folder here. And that's where you can then upload any brand specific assets. Okay, so you can see here, it pulls in my Soleil branding and store that inside of my codec specific folder and created a skill underneath that.
Now, if I ever want to pull in my branding specific color font, I can just say use Soleil brand for this video. So the next thing I want to set up is my 11 labs API. So 11 lab in this case is used to transcribe your talking head video.
So far with all the testing I've done, by far 11labs produced the best result and I think it's 100 % worth it to add a couple dollars into your 11labs API and use it to transcribe your video because the transcript is so important that times the exact placement of each animation so you want to make sure you're using the best tool.
It has a native built -in voice to text pool but I just don't like the results so here I'm just going to speak to it. I want to use 11labs API for the voice to text transcript.
Can you see if that's set up? And if not, can you walk me through the setup? Okay, so you can see here 11 Labs is not the default speech to text engine.
Instead, it's just a fallback. So we're going to make 11 Labs the default engine that it uses. And to get your 11 Labs API, you're just going to go to 11 Lab official website and search API.
And in here, you will see API keys, you can click on create key and make sure everything is set to access and you can change the name to hyperframe for you to identify next time and then just click on create key, then you're going to copy that key and paste it inside of the dot EMV file. Okay, so you can see here the 11 labs API is not configured.
And I'm just gonna tell it Yes, I want to use 11 labs, I have the API key, can you tell me where to paste it? Okay, so I'm going to follow this instruction. So copy this, so search terminal, then paste this entire command inside of your terminal.
So put this comment in, hit return, I want to paste it in the dot EMV file, can you update the dot EMV file so I can paste the key in there. Okay, so it's asking me to paste this comment inside of the terminal in order to give pass over the API key securely, I probably prefer to just paste it directly into this hidden file that usually we're we're always pasting all the API key inside of a file called dot EMV.
So you can see here we have a dot EMV example and it just recreated new file for us called dot EMV. So all you need to do is paste in your API key that you have copied from the 11 labs website into here and make sure you save that. Okay.
So now I can just say it's done. Okay, now it's updating the script to incorporate 11 lab into his process. Okay, perfect.
11 labs are now installed. So the next thing we're going to do is inside of this folder that we just installed, I'm going to create a brand new folder called projects. That's how I like to organize all the video projects that I create.
And then inside of this project, let's do a first test project. So what I'm going to do is I have a video, a five second video that I would like to use as test with you live. So you can hear it now.
onboarding questions to turn your AI into intelligent copilot that's built around your work and life. So this video, I'm going to drop it right inside of this folder. Okay, now we're just going to talk to Codex to edit that video that we just dropped.
I just created a new project folder underneath project called test project. Can you please edit that raw video by adding motion graphic text and subtitles? Please make sure the subtitles are chunked into shorter phrase with no punctuation and add animation that looks modern sleek editorial to highlight what the speaker is saying, make sure you don't cover the speaker face, be mindful of where the animation is placed, show me what you got, do something really impressive.
Okay, we're just gonna send that off. You can see here, I'm not giving too much of direction. Oh, you know what, we also want to turn on the planning mode.
So by turning on the planning mode, you're just going to type slash plan and make sure this is clicked on and you will see this pop up showing up, then you know it will first give you a plan before it executes anything. Okay, so it gives me a general plan, but I think it's missing a little bit detail with the motion board.
So exactly what are some of the animation, the text overlay that it's going to write. So I'm just going to speak to it.
Can you be a little more specific with your motion board? I want a initial text overlay as a hook that says something like nine question to set up your AI. And I would like to see moving animation that indicate there are nine different questions that will be walked through in the video.
Do something that tells the story.
Okay, perfect. Now we have a better looking plan. Let's open this up.
So you can see this is the motion board I was talking about, I can see exactly at each timestamp what is going to happen. Okay, so that looks good. Let's implement this plan.
Okay, so it's the first iteration is ready. Let's take a look. Here are nine onboarding questions to turn your AI into intelligent copilot that's built around your work and life.
That's not bad. You can really see what one shot prompt can get you. And from here, you know, if you want the animation to be directly overlay on top of the speaker, instead of having it in like a separate block, we can just iterate from here because that wasn't specified in the prompt.
I've been editing a lot of my videos using the Hyperframes project. So I'm going to show you three different projects that I've created just to showcase what are some of the possibilities. So first it can animate any screenshot interface that you provide for example here.
I have a video that I need to edit and I wanted to animate this exact website UI. So this screenshot I provided, and you can see here in the prompt, I said animate the connector page using provided UI reference called connector image, and then show all the connectors enable on with toggles animating setting into the final state.
So if we take a look at what it was able to do in my video, just for a second. 35 hours of continuous recording because it all links back to your gen spark second brain you can just ask wait see it's able to add that animation exactly as how i want it and this is another ui that asked it to animate so this is the final screen showing showcasing the second brain interface and if you take a look at what i was able to do right here and think you can check out the limited first really You can see that it's also entirely animated based on this image.
So this is super handy if you're making any sort of apps or software demonstration videos. Okay, the second edit again blew my mind. So this on the left hand side is my raw video, you can see it's a landscape video with a blank space on the bottom that I wanted to do animation on top and I asked it to essentially animate everything that I'm speaking into live typing chat window.
So it's mimicking what I'm doing on my laptop. And you can see here. I'm just going to talk to it.
I want you to edit the raw video I dropped inside a folder called AIOS intake, the style shift. Perfect. Exactly how I want it.
So if you look at the prompt here, you can see for the bottom screen, I want you to mimic a screen recording, which you can reference the image that uploaded. So I took a screenshot of what the chat window looked like. And I just tell it to type out that text as I'm saying it.
Just with me word dumping what's in my head. it's able to translate that exactly how I want it. Okay, this last one also super cool.
So you can see here in this raw video, I wanted to mimic this one of the Canva feature where if you do magic layer, it's able to do this scan animation. And I want to apply that animation on my video because this video is about Canva. And I wanted to kind of mimic exactly how that feature look like on Canva, where once it's scanned, you have all these layers being selected in a rectangle.
So you can see here, if I look at the prompt, I said reference. the uploaded image so i give it a screenshot so you see what i'm talking about each layer being separated out into individual editable layer there's a rectangle around each object i think i also mentioned i want the slow animation that could like swipe left and right so if we take a look at the final result here this canva magic layers is the fix to all your problems i generated these two perfect exactly how that was like first attempt you can just see how excited i am about using this to edit my video it's just been such a lifesaver i don't i don't ever have to go to my editor for it of these edit like before I probably even wouldn't go to this land.
But now there's so many like fun things I can add my video hopefully that gives you an idea just how much fun you can have with this hyperframes plus AI project. The possibilities are really limitless. You can do so much with it as long as you're able to articulate the type of animation motion graphic that you want.
Thank you for watching. I'll see you in the next one.
Named ideas worth stealing.
10:48concept
Motion board planning step
Turning on the coding agent's planning mode before executing an edit produces a timestamped breakdown of what will animate and when, so missing detail gets caught before the render runs.
Steal forany AI-driven creative task where a single-shot instruction risks under-specifying the result
04:29concept
Brand kit folder pattern
A dedicated folder storing colors, fonts, and logo lets every future generation reference the brand by name instead of re-describing it each time.
Steal forany repeatable AI content-generation pipeline that needs consistent branding across outputs
How they asked for the click.
VERBAL ASK
12:06link
“Get my exact style template — link in description”
On-screen overlay text pointing to a bit.ly link during Example 2, reinforced by the pinned top line of the video description; no verbal ask, just a persistent on-screen reminder.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
Visual structure at a glance.
