Say Goodbye to Remotion/Hyperframes! Let AI Make Videos with Code and Generate Professional-Grade Bilibili Creator Videos in 5 Minutes!

Let me ask you a question:

If you were asked to make a 1-minute short video explaining the training process of large language models right now, how much time would you need?

1 day? Or a few hours?

I only need 5 minutes.

Let me show you a video explaining large model training made in just 5 minutes:

https://svganimate.ai/zh/animation/4e23e305-be79-44b4-a112-e3bc47ea46f7

What do you think? Looks pretty good, right?

I could easily make 100 videos like this a day if I wanted to.

What method did I use to make such a video in less than 5 minutes? Don't worry, let me tell you how.

I'm sure you often see many science and knowledge explainer animation videos on short video platforms or Bilibili. Have you ever thought about making such videos yourself and becoming a knowledge creator?

Or maybe you are a teacher, a student, or a working professional who wants to create such animated videos for work and study.

But making videos like this is not easy. You have to learn various professional software and generate all kinds of interactive animations, which is no walk in the park.

Is there a magic button that allows me to turn the ideas in my head into instructional videos with just one click?

Some time ago, I created an SVG animation website that can generate beautiful science explainer animations with just a single sentence, greatly boosting creation efficiency.

In the process of making videos, many clips that cannot be found in the CapCut library can be generated using this website. The visuals are gorgeous, and there's no copyright risk.

Since the launch of the website, it has been loved by many teachers, students, and engineer friends. Quite a few video bloggers also use it directly to produce video content.

But as time went on, more and more users gave feedback on a common request:

"The animations look great, but making them clip by clip is still too slow. I want to make them even faster. Can you just help me make the entire video directly? Including voiceovers, storyboards, scene transitions..."

To make a complete knowledge explainer video, having just animation clips is far from enough. You also have to:

• Write the script word-for-word: Break down a knowledge point clearly and organize it into spoken, rhythmic explanations
• Split storyboards: Decide what visuals go with each paragraph and how to transition between them
• Add voiceovers: Find the right voice, record or read the script, and match the duration
• Render visuals: Every storyboard needs to be made individually, and the style must remain consistent
• Add subtitles: Add subtitles to the video and proofread them
• Merge and export: Put dozens of visuals + dozens of audio tracks together along the timeline

Going through this entire workflow, making a 5-minute video takes a day or two of tedious work, to say the least.

So, can AI handle this sequence of tasks?

After months of polishing, I have finally solved this problem and integrated the entire video creation workflow into the website.

This is the new feature I want to formally introduce to you today: HTML Video.

Some friends might be hearing the term "HTML Video" for the first time, so let me explain it first.

Premiere Pro, After Effects, and CapCut are great at handling camera footage, color grading, and transitions. But knowledge explainer videos don't need any of that. What they need is clear text, precise charts, and a well-structured layout of information.

HTML video takes another path: writing every frame of the video using web code, letting the browser "run" these web pages, and then recording them into a video.

Every word, every line, and every animation you see in the video is not edited; it is output by code.

This technical approach has several advantages:

Text and charts are always razor-sharp.

No matter the resolution, because they are vector-based, not made of piled-up pixels.

Modifying one frame doesn't require touching the entire timeline. Is the data in a certain storyboard incorrect? Just change the code for that specific frame, and everything else remains untouched. In traditional editing, adjusting one scene can affect the whole video.

The entire production workflow can be completely handled by AI. Writing code is currently one of AI's most mature capabilities. Turning video into code is essentially transforming video production into what AI does best.

This is why HTML videos are naturally suited for educational content.

Now, you only need to enter a single sentence describing your needs, and the system will automatically create a knowledge explainer video for you.

For example, this is a video I had AI create today to introduce DeepSeek-V4:

https://svganimate.ai/zh/animation/be496ef6-b699-47f5-9635-f8a428f35d63

Throughout the entire process, the AI automatically did the following things for me:

Step 1: Script + Storyboard

First, the AI expands my topic into a complete narration script, and then splits this script into individual storyboard segments:

Step 2: Visual Generation

Every storyboard will be converted into an independent HTML page, complete with layout, typography, and animation effects, automatically applying the visual style I selected:

Step 3: Synthesis and Export

Combine all visuals in chronological order, sync them with the AI-generated narration audio, and finally export them into a video file that can be played or uploaded directly.

Throughout the entire process, you only need to write a single sentence, and the AI handles the rest.

To make the generated video better match your expectations, I have provided two key options before generation: Visual Style and Narration Voice.

When watching Bilibili, you might often find that some creators make exceptionally high-quality videos with gorgeous visuals and buttery smooth animations.

Different bloggers also have their own signature styles.

svganimat.ai analyzed the visual styles of outstanding videos from some popular content creators, enabling you to produce the same professional visuals and motion effects.

Also, Anthropic's style has been quite popular recently, with many websites adopting this aesthetic, so I integrated Anthropic's style as well.

Each style corresponds to a complete set of color schemes, fonts, and typographic design languages. The AI will strictly follow these when generating visuals, ensuring visual consistency from the beginning to the end of the video.

For narration, there are multiple built-in Chinese and English voices with different styles. Simply click to preview and select, and the AI will use this voice to generate the narration for the entire video:

Having discussed this, some friends will surely ask:

"Remotion, which went viral on X recently, and the newly released Hyperframes, don't they also use code to make videos? What's the difference between them and your tool?"

Let me briefly introduce these two:

• Remotion: An open-source framework for writing videos using React, which recently went viral on X. It can be paired with LLMs like Claude through skills to let AI write React code and then render it into video.
• Hyperframes: A recently released HTML video tool with a similar concept, also using AI skills to generate content.

The direction of these two is actually aligned with what I am doing—both use web pages/code as the source of visuals to produce videos.

But in practice, you'll find that they currently suffer from some hard pain points. And these are precisely the key problems I focused on solving when creating this website:

Remotion and Hyperframes take the AI skills route, and they burn a massive amount of tokens in actual use.

Friends who subscribe to Claude Pro probably know this feeling all too well: the 5-hour limit can sometimes be completely drained before even finishing a single video, let alone making iterative adjustments.

On the website I built, a 1-minute video costs only around 1 to 2 RMB to make.

The skills-based approach of Remotion / Hyperframes makes the entire process a black box. You give an input, and it spits out a video, leaving you with zero control over the intermediate steps.

Unhappy with a certain scene? Want to change a line of narration? Want to replace a specific storyboard?

Sorry, but you have to regenerate the entire video. And then... burn another batch of tokens and roll the dice again.

In contrast, my website is designed in the exact opposite way: every single step is visible and editable.

• Once the script is generated, you can edit it line by line
• After storyboarding, you can adjust the prompt of any specific storyboard
• If you are unhappy with a specific frame, you can redraw that single storyboard individually without touching the rest
• If the rhythm of the narration feels off, you can re-synthesize it individually

The flexibility is leagues ahead of the black-box solutions, and the cost of iteration is dramatically lower.

Remotion and Hyperframes focus primarily on visuals, meaning you mostly have to figure out the audio part on your own.

Meanwhile, my website records the voiceover along with the video generation. With multiple built-in Chinese and English voices, you can listen and choose, and the AI automatically synthesizes the complete narration audio track based on the script.

Of course, if you are a creator who needs to record your own voiceover, you can easily turn off the built-in voiceover with a single click.

Additionally, the video's subtitles can be toggled on or off. If you want to use your own unique subtitles, that is absolutely fine.

The configuration is highly flexible—work however you are most comfortable.

From my own experience, HTML videos are particularly suitable for the following scenarios:

• Knowledge Explainers: Turn a knowledge point directly into an explainer video with a script, storyboards, and narration
• Classroom Teaching: Generate storyboard visuals, narrations, and teaching rhythms based on course content, perfect for classroom presentations
• Storytelling: Turn a story topic into an explainer short video with voiceovers, clear storyboards, and a complete rhythm
• Product Showcases: Use a video to clearly demonstrate product features, workflows, and selling points
• Data Stories: Tell data-driven stories using animation, which is much more impactful than just posting a static image

You don't need to know video editing, nor do you need to know motion graphics software.

As long as you can describe what you want to explain in a single sentence, the AI can help you handle everything from the script to the final video.

Moreover, after generation, all content remains fully editable: you can adjust the script, storyboard prompts, visuals, and voiceover repeatedly as needed.

In addition to the major HTML Video feature, I have recently upgraded the website's animation creation capabilities, adding a bunch of new animation types.

The website has dedicated entry points for each specific animation scenario. Once inside, you can generate the corresponding type of animation with just a single sentence description.

Let me highlight a few of the newly added categories.

This allows the AI to generate animations with a 3D feel, suitable for abstract concept visualization, 3D product demonstrations, sci-fi visuals, and other scenarios, such as displaying molecular structures:

This lets the AI generate animations in pencil sketch or watercolor doodle styles, ideal for warm, humanized science content, children's education, picture-book-style explanations, etc.:

This allows the AI to generate "stroke-by-stroke" line animations, especially suitable for Logo outlining, map routes, track plotting, and other scenarios that require a sense of the "drawing" process:

Combined with previously available features like map animations, data visualizations, flowcharts, product demos, text animations, logo animations, stick figures, loading animations, and mini web games, the tools page now covers over a dozen mainstream animation types.

Right now, the website is offering a free perk: all registered users can get 50 points for free, which is enough to create 5 animated contents!

If you also want to try out this new HTML Video feature, feel free to leave a comment. I will select 3 lucky winners and give each of them an additional 300-point free trial card.

Website Address: https://svganimate.ai/

You can also click "Read Original Article" at the bottom to go there with one click. Welcome to try it out!

If you also want to become a knowledge creator, or if you are a teacher, doctor, or engineer who wants to clearly explain knowledge with videos but struggles with video production skills, then now is the time to give yourself wings with the power of AI and take that first step!