Big Idea

The argument in one line.

HyperFrames turns Claude Code into a motion graphics generator for short-form video, but usable output depends on feeding it reference images, chunked prompts, and specific camera-motion language instead of one open-ended request.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You make short-form video for a brand or business and want data charts, explainer animations, or title cards that look premium without hiring a motion designer.
You already pay for Claude Code or Codex and want a concrete, repeatable prompting workflow instead of one-off experiments.
You're evaluating AI motion-graphics tools and want to know what actually ships versus what's just a demo reel online.

SKIP IF…

You want a tool that handles timing cuts, sound design, and music automatically. This workflow still leaves those tasks to a human editor.
You're not using Claude Code or Codex. The whole method is built around feeding reference images and data through a coding assistant.

TL;DR

The full version, fast.

HyperFrames is a free tool that pairs with Claude Code or Codex to generate short-form motion graphics: animated bar charts, text-and-visual explainers, and liquid glass title cards. The workflow is consistent across all three: collect reference images (Pinterest works well), hand Claude the data or script, then prompt for a short clip with explicit fonts, colors, and camera motion rather than vague instructions like 'make it cinematic.' Six habits separate usable output from generic AI look: always use references, generate short chunked clips instead of whole videos, specify exact camera moves, edit one change at a time, leave timing and sound design to a human editor, and borrow established visual languages like Vox or Apple's liquid glass instead of inventing a new style from scratch.

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 →

Chapters

Where the time goes.

00:00 – 01:07

01 · Intro: Hyperframes for Short Form

Ben frames the video around what's realistic with HyperFrames, since most online demos aren't actually made with the tool.

01:07 – 01:26

02 · Animated Data Charts (Vox Style)

First use case introduced: Vox-style animated bar charts and data visuals.

01:26 – 02:27

03 · Pinterest Reference Images and Data

Collects visual references on Pinterest and asks Claude to source the underlying data (most populous African cities).

02:27 – 04:12

04 · Claude Code Prompt for Hyperframes

Walks through the exact prompt structure: upload references, specify duration, request smooth motion graphics and named fonts/colors.

04:12 – 04:52

05 · Fixing Short Form Safe Zones

The first chart render bleeds past the 9:16 safe zone; a single follow-up chat message fixes the margins.

04:52 – 05:39

06 · Text and Visual Explainer Animations

Second use case: pairing spoken video scripts with on-screen text and visual emphasis.

05:39 – 07:15

07 · Finding Animation Spots in a Script

Hands Claude a full video script and asks it to suggest where animations belong before building anything.

07:15 – 08:13

08 · Parallel Claude Code Chats

Instead of generating every clip at once, Claude writes standalone prompts that run in separate chats simultaneously.

08:13 – 08:52

09 · Liquid Glass Titles with Apple Docs

Third use case: referencing Apple's own liquid glass design documentation to recreate the translucent title effect.

08:52 – 10:12

10 · Sponsor: Typeless Voice Dictation

Sponsor break for Typeless, a voice-dictation tool Ben uses to prompt Claude Code faster than typing.

10:12 – 10:50

11 · Adding a Logo to Liquid Glass

Drops the HyperFrames logo into the liquid glass title treatment as a finishing touch.

10:50 – 13:39

12 · 6 Tips for Better Hyperframes Output

Six-point checklist for avoiding generic AI output: references, chunking, specific motion, incremental edits, what to leave to a human editor, and visual-language theft.

13:39 – 14:29

13 · Other Hyperframes Use Cases

Closes with a quick rundown of launch videos, product demos, social ads, and overlays as additional use cases.

Atomic Insights

Lines worth screenshotting.

HyperFrames output looks generic unless you feed it reference images first, because left alone it defaults to an obvious AI aesthetic.
Chunking a video into 4-10 second clips and stitching them together in post beats generating one long clip, since long single generations tend to lose detail over time.
Telling an AI tool to 'make it cinematic' is beginner-level prompting; naming the actual camera move, push in, pull out, pan, or static shot, gets a specific result.
Editing AI-generated video works best one change at a time: tell it to keep everything the same except the one thing you want fixed, not regenerate the whole clip.
Timing cuts, sound effects, and music are the tasks HyperFrames handles worst, so they're better left to a human editor in post rather than prompted for.
Borrowing an established visual language, Vox-style data charts, Apple's liquid glass, documentary pacing, gives an AI tool a target it can actually hit instead of inventing a style from nothing.
Standard short-form safe zones cut off content near the edges of a 9:16 frame, so AI-generated charts and text need a manual review pass before they're usable.
Asking Claude to write standalone prompts for each clip, instead of generating a whole video in one pass, lets multiple sessions render pieces in parallel instead of waiting on one long sequential run.
A content team got over 200,000 short-form views in 30 days using mostly this three-use-case workflow: data charts, explainer animations, and title cards.
Pointing Claude at an official design spec, like Apple's liquid glass documentation, produces a more accurate recreation of that visual style than describing it from memory.

Takeaway

Six habits that keep AI motion graphics from looking generic

AI VIDEO WORKFLOW

The difference between premium HyperFrames output and generic AI motion graphics comes down to reference images, chunked prompts, and naming the exact camera move instead of staying vague.

01Intro: Hyperframes for Short Form

Most online HyperFrames demos are hype: a lot of what's shown isn't actually built in HyperFrames, so the realistic use cases are narrower than the hype suggests.
A results number, 200,000+ views in 30 days, up front establishes this as a production workflow, not a demo reel.

02Animated Data Charts (Vox Style)

Any dataset that could be a chart, rankings, city stats, poll numbers, can become a Vox or Johnny Harris style animated visual instead of a static graphic.

03Pinterest Reference Images and Data

Pinterest boards built around a specific style term (e.g. 'scientific design style graph') are a faster way to collect visual references than describing a look from memory.
When the data isn't already on hand, asking Claude to search for and return it directly skips a separate research step entirely.

04Claude Code Prompt for Hyperframes

A usable HyperFrames prompt has four parts: upload references and ask for style analysis, specify length and aspect ratio, describe the animation and fonts/colors explicitly, then only request sound effects if you can describe exactly what they should sound like.
Generic requests for sound effects return generic, low-quality results; HyperFrames needs the sound described, not just requested.

05Fixing Short Form Safe Zones

AI-generated vertical content routinely ignores platform safe zones, so a manual safe-zone check is a required step, not optional polish.
Fixing a layout issue is a single follow-up chat message, not a full regeneration of the clip.

06Text and Visual Explainer Animations

Pairing spoken narration with on-screen text and motion helps land complicated points, because hearing and seeing a claim together lands better than audio alone.

07Finding Animation Spots in a Script

Handing Claude a full script and asking where animations should go, before generating anything, produces a reviewable animation plan instead of committing to output blind.
Not every line needs an animation; the value is in picking the two or three moments, a stat, a reveal, that actually benefit from motion.

08Parallel Claude Code Chats

Generating every clip in one long session is slow; asking Claude to output standalone, self-contained prompts lets multiple chats render different clips in parallel.
A multi-clip video that would take one long sequential generation can finish in five to ten minutes once the prompts are split across parallel sessions.

09Liquid Glass Titles with Apple Docs

Pointing an AI tool at the original design specification, Apple's own liquid glass documentation, produces a more accurate recreation than describing the look secondhand.
Dropping a logo image into a liquid glass title treatment is a simple way to brand an otherwise generic animated effect.

11Adding a Logo to Liquid Glass

A transparent PNG logo layered into a liquid glass animation reads as a finished title card rather than a generic effect.

126 Tips for Better Hyperframes Output

Switching visual styles between videos requires new reference images each time; reusing old references locks you into the old look.
Chunking output into 4-10 second clips and editing them together in post avoids the quality loss that happens when a single clip runs too long.
Vague direction like 'make it cinematic' is beginner-level prompting; naming the exact camera move (push in, pan, static, fade) gets a specific, repeatable result.
Timing cuts, sound effects, and music are the weakest parts of AI-generated video output, better handled by a human editor in post than left to the AI.

13Other Hyperframes Use Cases

Beyond charts, explainers, and titles, the same workflow extends to launch videos, product demo screen recordings, social ads, and overlay graphics on existing footage.

Glossary

Terms worth knowing.

HyperFrames: A free browser-based tool from HeyGen that generates short animated motion-graphics clips from a text prompt, used here alongside Claude Code or Codex to build the actual visuals.
Liquid glass: Apple's translucent, light-refracting interface style used across its product design language; used here as a reference look for animated title cards.
Vox-style chart: A data-visualization animation style popularized by explainer channels like Vox: minimal color palette, bars or numbers that build up from zero, and a clean title.
Safe zone: The inner portion of a 9:16 vertical frame guaranteed to stay visible across TikTok, Reels, and Shorts players; content placed near the outer edges risks being cropped or covered by platform UI.
Push in / pull out: Camera-motion terms for a simulated zoom toward (push in) or away from (pull out) the subject, used as explicit prompting vocabulary instead of the vague instruction 'zoom.'

Resources

Things they pointed at.

00:00toolHyperFrames ↗

08:52toolTypeless ↗

02:27toolClaude Code

02:27toolCodex

01:26toolPinterest

08:13linkApple's liquid glass design documentation

Quotables

Lines you could clip.

00:09

“I see all of these demos on like X or LinkedIn, people talking about this, but they're not actually making the videos in Hyperframes.”

calls out the gap between online hype and real HyperFrames usage→ TikTok hook↗ Tweet quote

00:35

“We've gotten easily over 200,000 views on short form content using Hyperframes in just the last 30 days.”

concrete proof number that frames the whole video as results-first→ newsletter pull-quote↗ Tweet quote

12:15

“Tip number four is to iterate like an editor, not like a prompter.”

tight, reusable framing for any AI-editing workflow→ IG reel cold open↗ Tweet quote

12:45

“Don't use AI to do what an editor could do better.”

contrarian-sounding rule from someone selling the AI workflow→ TikTok hook↗ Tweet quote

The Script

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

In this episode, I'm going to show you how to use the free tool Hyperframes to create viral Instagram reels and short form content. We'll talk briefly about other content formats as well, but I'm mainly going to focus on short form with a specific emphasis on what's actually realistic. Because I see all of these demos on like X or LinkedIn, people talking about this, but they're not actually making the videos in Hyperframes or the majority of what they're doing isn't in Hyperframes.

But there are a ton of cool videos you can make and it's really pretty simple once you get the hang of it. You just need to know the key steps. And by the way, I'm not just some guy making stuff up.

My name is Ben. I'm the head of content at a biotech startup called Stack Health. I was previously head of growth at a YC backed startup.

And at Stack, we've gotten easily over 200 ,000 views on short form content using Hyperframes in just the last 30 days. We are going to cover the best use cases for Hyperframes. Can you make product launch videos?

Can you do Vox style animations? Can you do animated charts? Like all of that sort of stuff.

So what's good? What's not? the key steps to build those types of videos, I'll give you six extra tips to make sure that your hyperframes output is good.

And then I'll briefly mention a couple other things that you can do with it. That, let's jump in. To kick it off, let's talk about the best use cases.

First up is cool motion graphic animation. So this is kind of like a Vox or a Johnny Harris style of graphs or data. Anything that could be a chart can be turned into a beautifully animated visual like this or like this.

Here are the steps to do that. Step one is gather good reference images. And what I would highly, highly recommend is Pinterest.

So go to Pinterest and search for something like scientific design style and maybe add in graph. And then you'll start to see some things that you like. So for example, I like this one.

I would save that. You'll save it to, you'll go up here and you'll create a board that you can save it to. You can see I already have my scientific style here.

So I have a bunch of stuff there. And then you'll go through and do that with a bunch more. Next up, you need to actually gather the data.

You might have it already, but if you don't, you can just ask Claude to find it. So say I want to make a visual about the most populous cities in Africa, like top 10 cities with the most people. I'll just ask Claude to find that data.

Can you search for and find the top 10 cities in Africa with the most people? And then give me a random list of them. with the city and the number of people.

In the example that I had used before, I was making a video about the most popular peptides by search volume. It's part of what we do at Stack Health. And so I just had it search for that, pull that data.

Next, we are going to actually set up HyperFrames and use it. Step three is to feed that data into Cloud Code or Codex. Now, HyperFrames is totally free, but for these paid coding assistants, you do have to pay.

So Cloud Code is $20 a month minimum, I think, and then Codex, I think they still have an $8 a month plan, but you might hit rate limits on that one. Step one upload the reference images tell it to use them and analyze the style step to specify the length of the clip Step three tell it to use animations fade ins and out smooth motion graphics throughout the whole thing Specify the fonts and colors you want and then if you want you can add in sound effects But it's best to specify what those sound effects should be because otherwise it's not like super it gives you like really generic ones That I don't think are very good and then you'll have it render.

I'm going to give it a prompt like this I'll paste in below some data for a chart that I want to make using hyperframes. So you'll have to install hyperframes and then copy the style of this chart that I have added in here.

Use the same color scheme, same number. Only thing is we are making a chart about most populous cities in Africa. So I need to switch up to do that.

And then you can remove the kind of extra stuff that's on like the top left and top side of it, but that's unnecessary here. But it'll give a nice title. Use smooth motion graphics and animations for the bars popping up.

So they should start at zero and then kind of like build up until they get to the number that they're supposed to be at. And this should all be for a vertical short form piece of content, 9 by 16 aspect ratio, and it should last seven seconds in total. You can use the same color scheme here.

Paste that in and then we just got to put the data at the bottom Which is I would I had copy and pasted before so here's here's my data So now it's finished up You can see it wrote a bunch of stuff here and then down here it gave me the actual video So if you want to see what this looks like Boom that's pretty cool this to me.

This looks like a vox style animation like you would think wow. This is really premium. This is really cool Now, if you want to make edits to your video, you can do that very easily.

Again, just by talking in chat. So like one that I know I will want to make for this video is for short form. There is like a certain safe zones on a video and this does not fall within those.

Like this stuff over here on the left side, it's going to get cut off because the safe zone will probably be like somewhere in here. All right. And now this has finished rendering.

So we'll open this and see. Cool. And now you can see that these have bumped over more so that the margin is safer and everything will fit in there.

It's even got the top to bottom margin good too. So now I think this is great. I would just hit this, download it, and then use that in my video.

The second use case is text and visual animations together to help explain things. So oftentimes if you're trying to make a point that's kind of complicated, it's better for someone to hear it, view speaking it, and see it visually on the screen than just hear it alone. so hyperframes makes it really easy to do this to emphasize the key points so our steps to accomplish this number one again gather reference styles step two is ask claude what's a great color screen if you have a reference style that had a good color scheme just tell it to use that that's probably the best way otherwise just tell it to use something aesthetic and use its design skill to get there step three give it your fonts again if you don't know i'd start with enter and then maybe like an accent font that you can just tell it to pick one it'll it should do pretty good Step four is to tell it the style that you want and ask it to mock something up.

Now is my favorite part. You're going to give your video script to Claude and just ask it where you should add animations. So tell it to give you the ideas first, like describing what sort of animations we're going to have before mocking anything up.

So I'm going to show you what this looks like with a real example. So this is a chat that I have had and I'm telling it. We have a new video here, so we're using our usual noir style.

That's what I call mine. And key things to call out here for the rest of the video, add in animations where it makes sense. You don't always need animations, right?

But sometimes you do. Just add some in where they fit. One that I know we'll want, so it's like for sure, do this, is the helicopter ride number ticking up to 20 ,000.

And then I tell it what image it can use in there. So this is different from a reference image. These are images that...

you actually want in the video. So usually, almost always, they will be PNGs, have no background, so that it can fit onto whatever background you're creating. And then this is the script that we were making a video about at Stack Health.

So, you know, crazy story that illustrates the current issue with healthcare today. I'm not going to read the whole thing because it doesn't matter, but this is the video script. So now it's going to look at this video script and it's going to decide where should we put animations.

And it's going to suggest a bunch. So it's saying, okay, clip one. boom, we're going to have this.

Clip 2 is an image, so we don't need anything there. Clip 3 is the helicopter plus the 20k counter. That's the one that you already saw.

Clip 5, 10 mile stat. So I'm reading through this and I'm like, oh yeah, okay, I like clip 3, I like clip 5, I like clip 8, and I like clip 10. So then I tell it which ones I like and which ones I want it to generate for me, but this is key.

don't tell it to generate them all at once. It will take a really long time. Instead, tell it to give you standalone prompts that you can feed to other Cloud Code chats so you can have multiple running in parallel.

So like here, this is what I actually said is, first, give me the full prompt for clip nine. And then I told it to build me clip three. So it will, here I was just doing two.

So it's like, it'll give me another prompt for clip nine. I'll go send that to another chat over here. And then it will also build me clip three.

Then you just generate them, just all the other ones. You give it to another Cloud Code Chat. They'll run a bunch in parallel.

You check back in. It'll maybe take five, 10 minutes. You can make any edits that you want after that.

And just to show you guys an example of what this might look like, here's another example with some chart data that is helping to be an explainer for this. So I'll show up on screen here a bunch of different visuals that we have made so you can understand kind of the style and how you can use it to set different points in the video.

The third use case I really like is the liquid glass effect for titles and animations. Hyperframes is quite good at doing that liquid glass effect. It looks really nice.

It looks really premium. So it's a great thing to add in. So I'll show you a real world example of how we used it on one of our content pieces.

So step one to create the liquid glass effect is just to tell it to reference Apple's design docs for Liquid Glass. Like, they specify exactly what it should look like.

So I'll say something like, And by the way, if you notice that I am talking to Cloud Code instead of typing everything out, the tool that I'm using to do that is called Typeless. It's this little guy here, and it's also the sponsor of today's video. So I've been using typeless for a while now.

I absolutely love it because I work so much faster. You can speak so much faster than you can type for the vast majority of people. But not only that, you also get way better output because it's so much easier to put stuff in.

When you have to type, it's complicated. It's hard. You just get to a point where it's like, I don't want to do this anymore.

So you kind of give up halfway through before your prompt is really that good. So your input's worse, your output's worse. But with typeless, they help organize everything, make it just a little bit cleaner so that you get the best input possible, and then your output is incredible.

It also does a bunch of other really cool stuff. Like if you're reading something, you can highlight a line of text and then press FN and space and ask anything about that text. So it's almost like a little voice agent you can just have a side conversation with to get some info that you need and then go back to the main thing that you're doing.

You can also translate stuff. So it is great and it's free to start you can always use it for free But if you want to upgrade to a premium plan, you can get five dollars off using the link below. I love it It's made me so much more productive.

So I'd highly recommend it and now we'll get back to the video Now as it's doing that the other thing that looks really nice with hyperframes is adding in a couple Images to whatever liquid glass thing you're doing. So like you can see In this video in this animation, we use like the little pictures of countries here, which I think looks nice And so I'm going to do the same thing for this.

So I'm just going to grab an image of HyperFrame's logo and then tell it to create something using that liquid glass effect.

Now it finished and let's look at this little title bar.

So that's pretty cool. I would maybe dial down the transparency or something here, but it looks good for now. So those are three great use cases.

Now let's talk about how do you actually get good output. Tip number one. Use reference images.

You got to use reference images. And if you ever switch up the style between your videos, you need new reference images for that. If you just tell it to come up with a design on its own, often it gives you that kind of AI look that is pretty obvious and doesn't really make your videos special in any way.

Tip number two, generate shots, not the entire video. Even if you're using this for an entire video, you should chunk it out into maybe like four to 10 second clips and then stitch those all together editing it yourself in post.

Oftentimes over really long clips it will kind of lose things and it's just more complicated if you want to make any like cuts or switches in there because it was all one video instead of like a couple. Tip number three is be specific about motion. Just telling it to make it cinematic isn't quite enough.

That's like the beginner level. Instead you want to tell it exactly what the camera is doing. So some terms you can use are Push in, push out is like zooming in, out.

A pan is the camera turning left or right. You can have static shots where it's just staying still and then telling it to like fade things in and out as different parts get animated. Tip number four is to iterate like an editor, not like a prompter, which means if it's 80 % of the way there, you can easily get it to 100%, but you need to do it step by step.

So don't just regenerate the whole thing and hope it's better next time. Tell it to keep everything else the same, except. for the one thing you want to change.

And even if there's like five things you want to change, just go one by one in each of those. If you just change one thing per time, it's usually pretty good. Tip number five is don't use AI to do what an editor could do better.

There are things that Hyperframes is not so good at, and trying to make it do those things is kind of just wasting your time. Like adding in certain music or cutting on timing, it's not that great at, and so you should probably just do that in post, like either yourself or an editor. So things like timing cuts, sound effects, music, captions, some sound effects, it can be okay.

Some not. If you want like expert level sound effects, you should probably do those yourself. Music, I would say do yourself.

Those are the key ones. And then tip number six is to steal visual languages. So there are specific styles, especially when it comes to animation that exist out there.

And you can just take those. Hyperframes usually won't understand them. So like the Vox style explainer videos, that it's pretty good at.

There's kind of the Apple style, which is like the liquid glass sort of thing that we did. You could do like luxury fashion. So it's dramatic.

It's very textural, kind of imperfect. There's like tech startup vibe. So kind of a modern sans serif font, like clean white or beiges, like that sort of color scheme, pretty good at.

And then more of like a documentary style with this sort of slow movement and like calling out certain items on like a charter image or something like that. Follow those six tips. you should get pretty good output.

Then for it, let's talk about other things you can do with hyperframes. Again, this is mainly on short form, but there's a bunch you can do. So number one, launch videos.

These are pretty popular. Take a little bit of work to stitch it all together, but you can get really good output. Two is product demos and product tours.

If you screen record something, hyperframes can turn it into a really nice visual with like text calling out key points, stuff like that. Explainers and tutorials, it's really good at. Social ads and promos where you already have footage shot.

and you just want to add kind of like some text and motion on top of it. It's pretty good. And then overlays and motion graphics, that stuff we covered.

So by now you've seen a couple different formats, how you can use hyperframes to create viral videos, make your videos better, look more professional. Go use hyperframes, try it out, play with it. You'll get really good.

This is going to be a very important tool in the future, I think. I'll see you next time.

The Hook

The bait, then the rug-pull.

Ben, head of content at a biotech startup, opens by admitting most HyperFrames demos online aren't actually made in HyperFrames. What follows is the workflow his team used to pull over 200,000 short-form views in a month: three concrete use cases and the prompting habits that keep the output from looking like generic AI motion graphics.

Frameworks

Named ideas worth stealing.

02:27list

3-Step Hyperframes Chart Prompt

Upload reference images and tell it to analyze the style
Specify the clip length and aspect ratio
Describe the animation (fade-ins, build-up motion), fonts, colors, and only request sound effects if you can describe exactly what they should sound like

The prompt structure Ben uses to turn reference images and raw data into a rendered HyperFrames chart clip.

Steal forany data-driven short-form clip: stat reveals, leaderboard countdowns, pricing comparisons

10:50list

Six Tips for Better Hyperframes Output

Use reference images
Generate short clips, not whole videos
Be specific about camera motion
Iterate like an editor, one change at a time
Don't ask it to do what a human editor does better
Steal established visual languages

Ben's checklist for getting output that looks premium instead of the obvious AI motion-graphics look.

Steal forany AI video-generation workflow, not just HyperFrames

11:49list

Camera Motion Vocabulary

Push in
Pull out
Zoom in/out
Pan
Static shot
Fade in/out

The specific terms Ben recommends using in prompts instead of vague direction like 'make it cinematic.'

Steal forprompting any AI video tool for camera movement

CTA Breakdown

How they asked for the click.

VERBAL ASK

08:52product

“Check out the sponsor of today's video, and get $5 off a paid plan”

Mid-roll sponsor read for Typeless, a voice-dictation tool, positioned as the tool he uses to prompt Claude Code faster than typing. Soft CTA, no hard pitch for his own product.

MENTIONED ON CAMERA

00:00toolHyperFrames ↗

08:52toolTypeless ↗

FROM THE DESCRIPTION

AFFILIATECommission earned if you click.