12:09Andy Lo · Tutorial
I Built an AI X Research Agent in Telegram (No API Needed)
A 12-minute build walkthrough: Zo Computer + Hermes agent + Brave Search = a free social listening bot that lives entirely in Telegram.
June 12thThe argument in one line.
HyperFrames turns video production into a software project where Claude Code writes HTML/CSS/JS scenes and the quality ceiling is determined entirely by the creative direction you give it, not the model's capability.
Read if. Skip if.
READ IF YOU ARE…
- You make editorial explainer videos and want to understand where AI-native production tools stand today.
- You already use Claude Code for development work and want to extend it into video output.
- You are evaluating HyperFrames or Remotion as a programmatic video stack.
- You have tried AI motion graphics tools that felt like animated slides and want to know if anything crosses the editorial threshold.
SKIP IF…
- You need a finished video today -- this is a workflow tutorial, not a one-click generator.
- You are not comfortable with Claude Code, prompt engineering, and basic project file management.
The full version, fast.
HyperFrames is an open-source framework from HeyGen that lets AI agents write HTML, CSS, and JavaScript to produce animated video. The workflow runs across three prompts: Prompt 1 builds the design system and scene skeleton; Prompt 2 populates scenes with assets and GSAP animations; Prompt 3 adds narration, SVG sourcing, and export. Quality scales directly with the richness of the storyboard and CLAUDE.md brief. Upgrading from 7 scenes to 19 sub-scenes across 7 chapters -- with an ElevenLabs voice-over and a pre-timed narration script -- produces output that approaches the lower range of real editorial production quality.
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 – 02:24
01 · Hook: The Finished Video
Shows the completed EV explainer, names the stack, explains why HyperFrames crosses the animated-slides threshold that prior AI motion tools could not.
02:24 – 05:28
02 · Project Folder Setup
Walks the folder structure: storyboard and direction doc, fonts (Alright Sans, Balto, Harriet Display), assets folder, CLAUDE.md operating manual, three-phase prompt files.
05:28 – 08:20
03 · Building the Video: Prompt 1
Sends Prompt 1 to Claude Code: read all docs, build design system and motion language, create 7 scene placeholders. Foundation only -- no images or charts yet. Takes about 20 minutes to run.
08:20 – 12:24
04 · Building the Video: Prompt 2
Sends Prompt 2: populate all 7 scenes with collected assets, follow storyboard, flag weak spots. Introduces the review-iterate-improve loop and context window hygiene via handoff files.
12:24 – 13:30
05 · Building the Video: Prompt 3
Optional polish phase: SVG logo sourcing, ElevenLabs narration generation, final render. Prompts 1 and 2 already produce a complete video; Prompt 3 adds production finish.
13:30 – 20:12
06 · Adding Narration, Music and More Scenes
Reveals the upgraded version: 7 chapters broken into 19 sub-scenes, 70%+ asset utilization, pre-timed narration script, OpenCode and Kilo Alpha for ElevenLabs API. Plays the full upgraded video.
20:12 – 21:20
07 · Final Thoughts and Conclusion
Positions HyperFrames as best Remotion alternative; recaps the Claude Code production team model; community CTA.
Lines worth screenshotting.
- HyperFrames renders HTML/CSS/JS into video files, so Claude Code can treat a video production exactly like a web development project.
- The CLAUDE.md is the operating manual for the entire production -- without it, each scene is locally coherent but globally inconsistent.
- Prompt 1 should produce zero finished scenes; bare scaffolding with correct typography and motion language is the intended output.
- Asking Claude to flag weak or missing assets before advancing to the next phase is the only quality gate in this workflow -- skip it and visual holes compound.
- Upgrading from 7 scenes to 19 sub-scenes does not change the workflow at all; it only changes the storyboard input.
- The gap between version 1 and version 2 comes entirely from input quality: richer storyboard, more curated assets, a pre-timed narration script.
- Context window corruption compounds in long Claude Code sessions -- start a handoff file at the first auto-compact, not after you see hallucinated outputs.
- HyperFrames amplifies motion designers rather than replacing them; creative direction still sets the quality ceiling.
- Collecting 2-3x more assets than any single scene will use gives the model real choices instead of forced fits.
The brief is the product, not the prompt.
WHAT TO LEARN
The gap between an AI video that looks like a slide deck and one that looks editorial has nothing to do with the model -- it is entirely in the storyboard, the design rules, and the asset curation that precede the first prompt.
- A CLAUDE.md that encodes the visual language before any code runs keeps all seven scenes consistent -- without it, each scene is locally coherent but globally fragmented.
- Collecting far more assets than any scene will use gives the model real creative choices; forcing it to use whatever is available produces forced fits that look cheap.
- Prompting Claude to audit and flag weak spots before advancing phases surfaces problems when they are cheapest to fix.
- The jump from 7 scenes to 19 sub-scenes is a storyboard decision, not a workflow change -- the same three prompts run identically, only the brief is richer.
- Context window degradation in long sessions is a production variable -- starting a handoff file at the first auto-compact prevents the inconsistencies that compound in later phases.
Terms worth knowing.
- HyperFrames
- An open-source video framework from HeyGen that lets AI agents produce animated video by writing HTML, CSS, and JavaScript scenes, which the framework renders into a finished video file.
- Remotion
- A React-based programmatic video framework; the prior state-of-the-art for AI-assisted motion graphic production that HyperFrames is positioned as an alternative to.
- GSAP
- GreenSock Animation Platform, a JavaScript animation library used inside HyperFrames scenes to control motion timing, easing, and transitions.
- Vox style
- A motion design language associated with Vox Media characterized by intentional, measured, slightly choppy animations where every visual element communicates information rather than existing for decoration.
- Handoff file
- A project status summary capturing decisions, context, progress, and instructions written at the end of one Claude Code session so a fresh session can continue from the same point.
- Context window
- The working memory of a Claude Code session. As sessions grow long it auto-compacts and can eventually produce inconsistent or hallucinated outputs.
- CLAUDE.md
- A project-level configuration file that acts as the operating manual for Claude Code, specifying design rules, technical requirements, workflow instructions, and constraints the model must follow throughout the build.
Things they pointed at.
15:00toolOpenCode
Lines you could clip.
00:29
“A lot of AI motion graphics still felt more like animated slides than real editorial video.”
19:17
“The real difference comes from the creative direction you give them. The better your planning becomes, the better the final video becomes.”
19:30
“HyperFrames is not replacing programmatic motion designers. It's actually amplifying them.”
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.
metaphoranalogy
00:00Take a look at this. China now builds more electric cars than the rest of the world combined. But the real story isn't the cars, it's the batteries inside them and who controls how they're made.
00:10This entire Fox style animated video was built using Hyperframes
00:15and Claude code. The scenes, the animations, the topography, the transitions, everything was generated as code.
00:23And we have already seen AI models developed motion graphic skills like Claude Code with Remotion. But the problem was that a lot of AI motion graphics still felt more like animated slides than real editorial video.
00:37And that's where Hyperframes by Heijient becomes more interesting because it gives creators more control over pacing, layout, timing, typography, transactions, and animation style.
00:48So instead of just a basic slide style video, you can now create something closer to a real vox style editorial animation. And in this video, we are going to show you how this project was built with Clot code and Hyperframes.
01:01So before we jump into the project, let us quickly explain what Hyperframes and Heijin are. So Heijin is already known for AI video, avatars, and realistic lip sync, but HiveFrames is pretty different.
01:14HiveFrames is an open source video framework from Heijin that lets AI agents create videos using HTML, CSS, and JavaScript. So in simple terms, it turns video creation into code.
01:26So instead of editing everything manually, Claude code can now build the feeder like a web project, and HyperFrames can render it into a finished video. And now let me show you how this system actually works.
01:39This entire workforce is built around only three stages. The first stage is the foundation. This is where Cord creates the video canvas, loads the fonts, defines the design system, builds the color palette, and creates the scene structure.
01:53And the second stage is the story itself. Claude writes the copy, builds the scene, creates the animation with GSAP, and connects everything together with transactions. And then the final stage is rendering.
02:05This is where narration gets added, source citations get inserted, and hyperframes exports the finished video. And now instead of manually animating every elements, transition, and layer.
02:17Fourth, with hybrid frames can structure the whole video system for you. And by the end of this deal, you will know exactly how to build yours. So before we start building, let me quickly walk you through the project structure.
02:28Everything starts with this file right here, the storyboard and direction. You can think of this as the creative brief for the entire project, and this defines the story that we are telling, the facial style we are aiming for, the scenes we need to create, and the overall direction of the video. And in our case, that means things like the fox inspired design language, the animation style, the scene structure, the color palette, typography choices, and the key message we want the audience to walk away with.
02:58So ultimately, what this document does is give Claude a clear understanding of what success looks like before it writes a single line of code. And now if you want to create your own custom Hyperframes project, we actually created a complete build guide that walks through the entire process from, like, storyboarding, access sourcing, all the way through building the final feeder.
03:20So you can find that inside our community as well along with the exact prompts and resources used in this project, and you can find the link in the description below. So next, we have the fonts folder. So for this video, we are using three main font families.
03:34Alright. Sans, Belto, and Harriet Display.
03:37And these are the prompts we selected to help recreate that forks style editorial look. And now you notice that we have the entire font family for each one loaded in the project, and in reality, we are only going to use a handful of this weight.
03:52But it is much easier to put the entire font family here than go through the entire pack and pick out which one to use. Now let's look at the Fox Media's folder and more specifically the SS folder. So you can now ignore the other files and folders first since those are covered in the build guide.
04:10And the assets folder is where all of our visual materials leave. Things like the images, SVGs, and videos. Anything you want to appear inside the final video.
04:20So for this project, we are mainly using images, and, yes, there are quite a lot of them, but that does not mean that we're using every single SS. Okay? Most scenes only need a handful of selected images, and the goal here is not to use more SS, but to have enough options to choose from.
04:39So next, you have the clot dot m d file. And if you have worked with clot code before, you probably recognize this immediately because this is essentially the source of truth for the entire project, and it contains the project rules, technical requirements, design constraints, workflow instructions, and everything Claude needs to consistently make the right decisions while building.
05:01You can think of it as the . And finally, we have the prompt, and these are the prompts we are gonna use to build a feeder from start to finish. And we will go through each one when we get to the actual build process.
05:15And for now, all you need to know is that the workflow is broken into three separate phases with each phase handling in different parts of the production pipeline. The project structure is in place. We can start building the actual video.
05:28And at this point, Claude already understands the assets, the storyboard, and the facial style we are aiming for. And the first thing we're going to do is to run prompt one, and here is exactly what this prompt does.
05:41The first thing we are asking Claude to do is read all the project documentation, and these are the storyboard and direction. And because before Claude starts building anything, it needs to understand what we are trying to create.
05:53And in our case, that's a Vogt style video about electric vehicles and artificial intelligence. And once Claude understands the goal, it starts building the design system, and that includes things like the topography, color palette, motion style, and all of the official rules that every scene will follow later.
06:14And, again, this is very important because we do not want every scene looking different from one another. Right? We want the entire view to feel like it was designed as a single cohesive piece.
06:26So the prompt also tells Claude how motion should behave throughout the project. And if you have watched Fox Features before, you may notice that their animations have a very specific style and feeling, and their animations are quite intentional, measured, and slightly choppy.
06:41It is a style that feels really editorial and more focused on communicating information. We are teaching Claude how to recreate that facial language from the very beginning.
06:51And then finally, we are asking Claude to create a structure of the feeder itself. Alright. Our storyboard now contains seven scenes, and what Claude does here is create placeholders for all seven scenes so we have a framework to build on later.
07:06And by the end of this prompt, we do not have a finished video yet, but we do have the foundation. And now let's copy the prompt, paste it into Claude code, and see what it builds. Alright.
07:17And it took about twenty minutes for Claude to finish building the foundation and inside system. And now the exact timing may vary, but you can expect this first phase to take a couple of minutes since Claude is setting up the entire architecture. And let's open it up.
07:33Right now, ours is running on local host three zero one four, and your port might be different. And if you do not see it immediately, just ask Claude for the link. And here we are.
07:43And now this looks very bare bones. Right? But that's exactly what we want.
07:49Remember, we have not built any actual scenes yet. We have not added images. We have not added charts.
07:57This phase was only about building the foundation. And from what we can see, everything looks correct. And all seven scenes are present.
08:05The topography hierarchy is on point. The motion design looks correct. We can already see that signature Fox style motion language beginning to take shape.
08:14Now most importantly, there's nothing here that needs fixing. The foundation is pretty solid. And now let's move on to prompt two, and this is where the actual fetal starts getting built.
08:25So if prompt one was about creating the foundation, then prompt two is about bringing the storyboard to life. And the first thing we are asking Claude to do is use the assets we have already collected, and then we are asking it to transform those raw assets into seven fully built scenes based on our storyboard. Okay.
08:46So now notice that we're not just telling Claude what assets to use. We are also reminding it how to use them. For example, every visual should explain something.
08:56Every animation should communicate information, and you can also carefully choose the specific assets you want to use. But for this video, we will tell Claude to do that, and we'll see how it goes. So nothing should exist just because it looks cool.
09:10That's the core part of Vox style, and we want Claude to follow that idea throughout the entire project. And now we are also giving Claude the structure for each scene. So rather than asking Claude to invent a story from scratch, we are giving it a very clear roadmap to follow, and that makes everything look consistent from scene to scene.
09:30And finally, before finishing, we are asking Claude to do something extremely important. We are asking it to tell us where the project is weak. For example, like missing assets, officials feel underdeveloped, etcetera.
09:41And Claude should flag it so that we can improve it before moving to the final stage. So now let's hit enter and wait. And once again, this may take some time.
09:51Alright. So after a while, it's finished. So just like before, clause gives us a summary of everything it accomplished.
09:58But honestly, this next step is the most important. And you can see as structured in the prompt, Claude also gives us a list of missing or weak assets across the project, and this is where quality control begins.
10:12You can take a look at the scenes Claude flagged. You can open the preview, see what looks off, maybe like an image feels weak or a facial doesn't support the narration strongly enough. Maybe one assessed simply fits the scene better than another, and this is mostly a facial review process.
10:28So you may tell Claude what you are seeing, and Claude will make the necessary adjustments. And this is exactly why we gathered so many assets earlier because now you can start selecting the strongest image for each scene instead of being forced to use whatever happens to be available. So after prompt two, the process becomes very simple.
10:48Review, iterate, improve. That's it. And you can ask Claude to fix official bugs you see, swap assets, or refine the timing, and the exact iteration process will look a little bit different every time, but the storyboard and claude.md will keep the project moving in the right direction.
11:04And both build guides, this one and the custom field guide, covers this process in much more detail so you do not get lost. Now one more tip before we continue.
11:15If you are unfamiliar with the term, the context window is essentially working memory for the current conversation.
11:23It's everything Claude can actively remember and reference while working on your project. So you can check its usage at any time using the slash context command, and as the courts built, it will essentially auto compact its context, and this allows you to continue working with a fresh context window without starting over from scratch.
11:43And for most projects, that's perfectly fine. But for us, once we start getting into second auto compact, we usually create a handoff file and start a fresh section. And there's not an exact rule for when you should do this.
11:57It's mostly a habit because as conversations become extremely long, the context will eventually become too corrupted, so you will run into inconsistencies or hallucinated outputs.
12:09So a handoff file is basically a project status summary. It contains all of the important decisions, project contacts, progress, and instructions needed so a brand new Claude session can immediately pick up where the previous one left off.
12:25And now we are ready for prompt three, and this step is completely optional. And as you can see, prompt three handles things like sourcing and generating SVG logos, creating narration, and rendering the final female.
12:37And if you do not need sourcing or creating custom logos or AI voice overs, you can absolutely finish a FeNO after prompt one and two. And at that point, you already have a complete FeNO.
12:49And for prompt three, it simply completes the final production polish. So let's jump into the preview and take a look at the final result. Okay.
12:58It looks pretty good. And now the question is, is this going to compete directly with a Fox video created by an experienced production team? I would say no.
13:08Not yet. But that's not really the point. Right?
13:11The point is that we'll build this in just about an hour using a handful of prompts. And despite that, the official hierarchy is that the topography feels cohesive, the assets blend naturally with the layouts, and the transition works. And also, the motion language feels close to the editorial style we were aiming for.
13:31So at this point, we already have a working video, and now we can take a step further and make it even better. More scenes, narration, and music, and a more advanced storyboard structure.
13:41So for this next version, we have two additional files. The first one is the leveled up storyboard, and this is exactly what it sounds like.
13:49It's an upgraded version of the original storyboard, but with a much larger scope. So instead of seven simple scenes, we are now working with seven chapters that are further broken down into 19 individual sub scenes.
14:03That may not sound like a huge difference. Right? But it changes the pacing of the entire video.
14:09So instead of spending, like, eight or ten seconds on a single visual idea, we are constantly moving between different supporting visuals, maps, charts, headlines, documents, and photography.
14:22And the result is a feature that feels significantly more dynamic and information dense. Also, another major change is access utilization. In the original version, we only needed a handful of assets per scene, and this upgraded version is designed to use over 70% of the entire assets library.
14:41That means more facial variety and more opportunities for court to create those like signature transactions where one ideas evolves naturally into the next. So next, we have the narration script.
14:54And as the name suggests, this contains all of the voice over for the upgraded versions of the project, but it's more than just a script. The timing has already been aligned to new storyboard structure and is formatted specifically for voice generation. And that means Claude already knows what should be spoken, when it should be spoken, and how it fits into the timeline.
15:16And now another thing you may have probably noticed is that we have had a OpenCode session running in a separate tab this entire time. And we actually used OpenCode together with our Alpha through OpenRouter to help set up the Eleven Labs API integration. And if you are curious about this and would like a dedicated feed covering Al Alpha and OpenCode, please let us know in the comment section below.
15:40And one thing we would like to mention now, the Al Alpha is currently a stealth model, and that means we do not really know, like, how the provider is having training, retention, or storage behind the scenes. So for us, we would avoid putting, like, sensitive information to it for now. Things like API keys, passwords, private credentials, of course.
15:59Anything you would not want to be exposed to. So for general work, it's perfectly fine and capable, and it has over a million contacts window. So now let's go back to the project.
16:09And at this point, implementing the upgraded storyboard follows the exact same process as before. And, also, we suggest that you can create a duplicate of this project folder if you want in backup.
16:21Okay. So we are going to skip this step by step process because it's almost identical to what we have already covered. So let's just jump ahead to when everything is finished.
16:30Alright. Time skip and the build is done. Let's take a look at the perfume.
16:34China now builds more electric cars than the rest of the world combined. But the real story isn't the cars, it's the batteries inside them and who controls how they're made.
16:44China's lead rests on four strengths, manufacturing scale, batteries, industrial policy, and factory floor AI, and the numbers are stark.
16:54China now makes more than 60% of the world's electric vehicles. These strengths aren't separate.
17:01They feed one another, a self reinforcing system that's extremely hard to compete with. At the center of it all is BYD, a company most Americans don't know.
17:10Now the world's largest maker of electric vehicles. Its factories are vast. Some lines finish a car in under a minute, and BYD makes its own batteries, chips, even the robots.
17:21Last year, BYD sold over 4,000,000 vehicles, and its batteries now supply rivals like Tesla. This is integration at a rare scale.
17:30It starts underground. China refines most of the world's lithium and rare earths. Those minerals become cells, then packs, then cars, rolling off Chinese lines by the millions.
17:41From there, they ship worldwide. China now exports more electric cars than any other nation. The newest shift is artificial intelligence.
17:49China's plants are becoming smart factories that learn and adapt in real time. Computer vision now checks every weld and circuit faster and more precisely than any human team. Digital twins model the whole line before a single part exists.
18:06The factory is becoming a brain. United States has noticed tariffs on Chinese EVs now approach 100%.
18:14Washington is steering hundreds of billions toward building a supply chain on American soil. New battery plants are rising across the Midwest, but the gap is wide and slow to close.
18:25So two systems now compete, one built over decades, the other racing to rebuild, both betting on the same technology.
18:33The race isn't about cars anymore, it's batteries, software, and AI. Whoever wins will shape how the world builds everything.
18:42And honestly, the HyperFrames and Claude code are genuinely impressive. With the chapter based structure, the additional assets, the narration, and the background music, the entire project feels significantly more polished.
18:56There's more movement, more variety, more storytelling, and most importantly, more clarity.
19:02So the feeder feels less like a prototype and more like something you would want to publish. And what's exciting is that we are still using the exact same workflow. And the only thing that changed was just the quality of the inputs, better storyboard, more assets, better narration, which is a really important lesson because the tools themselves are only part of the equation, and the real difference comes from the creative direction you give them.
19:28The better your planning becomes, the better the final video becomes. Now imagine what happens when you spend more time refining the storyboard or when you start learning motion design principles yourself or when you put this workflow in the hands of an actual creative team.
19:45Hyperframes is not replacing programmatic motion designers. It's actually amplifying them. And when you combine a strong creative vision with Claude code and HyperFrames, you can ship high quality videos dramatically faster than traditional workflows.
19:59So overall, we think that HyperFrames and Claude Code have a tremendous amount of potential in the right hands. And personally, we think that is probably the best alternative to Remotion of Filipip's sake.
20:11So now let's wrap things up. So first of Claude Code acts like the production team. Like, it organizes the project, writes the scene, creates the animation logic, structures the assets, and builds the entire feeder system.
20:25And hybrid frames then takes that system and renders it into an actual feeder. The biggest shift is that programmatic feeder production production is going further than ever. From Emotion, now we also have hyperframes.
20:37So instead of editing every frame manually, you just describe what you want and generate the system that creates it. That means faster iteration, better consistency, and workflows that are dramatically easier to scale.
20:51Try this yourself. Pick a topic you already understand well and build a feeder around this. You'll very quickly start seeing how powerful this approach can be.
21:00And after all, if you want more in-depth tutorials to learn how to make AI videos and how to make money with it, feel free to join our any no code community. You can find the links in the description below. And as always, if you found this video helpful, hit the like and subscribe button for more video like this in future.
21:17I'll see you in our next one.
The Hook
The bait, then the rug-pull.
He opens on the finished product -- a crisp, editorial animated explainer about China's electric vehicle dominance -- then reveals it was generated entirely by Claude Code and HyperFrames. The bait is the output quality; the tutorial is how to reproduce it.
Named ideas worth stealing.
05:00list
Three-Phase Prompt Architecture
- Prompt 1: Foundation -- design system, motion language, scene skeletons
- Prompt 2: Story -- populate scenes with assets, build animations, flag weak spots
- Prompt 3: Polish (optional) -- narration, SVG sourcing, final render
Three sequential prompts mapping to pre-production, production, and post-production. Each phase has a clear completion state before the next begins.
Steal forAny long-form AI content generation project where consistency across sections matters
06:30list
Vox Motion Language Rules
- Every visual must explain something -- nothing decorative
- Motion: intentional, measured, slightly choppy
- Typography: 4-layer hierarchy (primary / context / evidence / motion)
- Color: neutral base + charcoal type + single accent
- Copy: editorial voice -- confident, direct, journalistic
The design language rules encoded in CLAUDE.md that force Claude to produce consistent, editorial-quality output across all scenes.
Steal forCLAUDE.md template for any programmatic video production project
How they asked for the click.
VERBAL ASK
21:05product
“If you want more in-depth tutorials to learn how to make AI videos and how to make money with it, feel free to join our AndyNoCode community.”
Soft sell after a full-quality demo -- community access framed as the place where the build guide and exact prompts live. ElevenLabs and n8n affiliate links in description.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
