AI-Powered Video Production: HyperFrames, Remotion, and Git for 100 Viral Clips a Day

I posted a video before.

Actually, it's not just this one; several others have the same style — speaking to camera with an animated demonstration on the left side, cards sliding in, text appearing, and the rhythm following the content.

The numbers were all pretty good.

The craziest part: after I finished my voiceover, I didn't edit or process the subtitles. I just threw it to Codex, and 100% AI handled the subtitles, cut the pauses, generated the visuals, stitched everything together, and finally exported it.

Super effortless.

If you want to achieve the same effect, just throw today's article to your OpenClaw and let it level up: from beginner to mainstream to fallback, from installation to final output — commands and pitfalls are all documented here.

Before you start, get clear on the relationship between the three approaches.

01 What's the relationship between the three approaches?

Beginner: HyperFrames — AI writes HTML, directly renders to MP4. Lowest barrier to entry, suitable for quick batch content production.

Mainstream: Remotion — AI writes React components, every frame is code, higher ceiling for effects. The architecture diagram animation on my video account used this.

Fallback: Git — It doesn't generate videos, but both paths can't do without it. Git acts like a save point, so if AI breaks something and Ctrl+Z can't undo it, Git provides full backups, letting you return to any working version at any time.

So all three together make it complete: use HyperFrames for "quick validation," Remotion for "polished refinement," and Git for "full backup and fallback" throughout, to finally produce the MP4.

02 Beginner: HyperFrames — HTML Directly to Video

HyperFrames is a video rendering framework open-sourced by HeyGen (see GitHub project: github.com/heygen-com/hyperframes). The principle is to write animations with HTML + GSAP, and an AI agent generates the code and directly renders it to MP4. It's completely free for commercial use with no restrictions.

AI has a higher success rate writing HTML than React, fewer errors, and faster fixes. Start here.

Send the following to OpenClaw to let it install HyperFrames:

Help me complete the HyperFrames environment setup and project initialization.

Steps:
1. Check Node.js version, if below 22, upgrade to the latest LTS
2. Install FFmpeg
3. Install HyperFrames Skill: npx skills add heygen-com/hyperframes
   Press space to select the skill package to install, Enter to confirm, select Project for installation scope
4. Create project: npx hyperframes init my-video --example blank
5. cd my-video, start preview: npx hyperframes preview

Handle any errors yourself without asking me.
After everything is done, tell me the execution result of each step, the preview address, and what I should do next.

After it runs, open the HyperFrames Studio preview interface that OpenClaw gives you. You'll see a timeline with real-time preview.

If you want to directly turn a WeChat public account article into a video without manually copying the text, first have OpenClaw install the WeChat article parsing skill, then generate:

1. Check if the wechat-article-parser skill is installed. If not, install it with clawhub install wechat-article-parser
2. After installation, parse this article: [paste your WeChat article link]
3. Extract the title and core points, then use HyperFrames (/hyperframes) to create a 30-second vertical video (3:4)

Video requirements:
- Dark background (#1A1A2E), white text
- Text slides in from below, each stays for 3 seconds, GSAP animation
- Bottom progress bar advances with time
- End with the public account name

Output index.html, after completion directly run the render command:
npx hyperframes render --output final.mp4
Output the rendered file to me.

If you want to include avatars or images in the video, tell OpenClaw to create a fixed asset directory in the project (e.g., my-video/assets/), save the images there, and then generate the video. With a fixed directory, it will know where to find them on subsequent runs.

Our team member ran a small demo with this framework, and the video's opening and closing with a personal touch were solved.

The animation rhythm is smooth and ready to publish. The visual hierarchy is relatively simple; if you want richer visuals, prepare image assets in advance and throw them to OpenClaw — there's plenty of room for optimization.

03 Mainstream: Remotion — React Renders Fine Animation

Remotion is a "video as code" framework where every frame is described with React components and rendered to MP4.

The main animations on my video account use this. The effects are more refined than HyperFrames, supporting more complex animation structures.

Previously, when I shared knowledge about using AI to learn complex logic, I also used this to create visual videos to lower the barrier to understanding.

AI writing React is harder than writing HTML; it usually takes 2-3 iterations, which is normal.

Windows needs Node.js and Bun. Send the following to OpenClaw:

Help me complete the Remotion environment setup and project initialization.

Steps:
1. Install Bun
   Windows PowerShell admin mode: powershell -c "irm bun.sh/install.ps1 | iex"
   macOS / Linux: curl -fsSL https://bun.sh/install | bash
2. Create project: bun create video, select Blank or Hello World template
3. bun install
4. bun run dev

Handle any errors yourself. After completion, tell me the browser address.

I encountered two pitfalls here:

First, after installing Bun, the command wasn't recognized, with a prompt saying "bun cannot be recognized as a cmdlet." Send this to OpenClaw: ls $env:USERPROFILE.bun\bin, let it find the path and configure it into the system environment variables, then restart PowerShell.

Second, bun run dev reported a port conflict and wouldn't start. Windows Hyper-V reserves ports 2929-3228 by default. Remotion's ports 3000-3100 were all occupied. Switching to a port outside this range solves it, e.g., $env:PORT=8080; bun run dev.

After the project is up, send the following to OpenClaw:

Help me create an article promotion video using Remotion.

First, fetch the content of this WeChat public account link: [paste link]
Extract the title and core points, first output a timeline plan, and after I confirm, write the component code.

Specifications: 30 seconds, 30fps, 1080×1920 vertical screen
Animation: Title zooms in from center, points slide in from right one by one, key numbers zoom and highlight, end with brand name fade-in
Color scheme: Dark blue background (#1A1A2E), white text
Render command: bun run render

Remember not to let OpenClaw write code directly. If you skip the "output timeline first" step, the rhythm will likely be completely wrong, and fixing it will be more trouble than starting over.

We ran a simple 30-second demo.

You can see that Remotion provides much richer information hierarchy. Adding a real person's explanation on the right side can make it a standalone video. Also, a reminder: Remotion consumes a lot of tokens for complex animations, so estimate usage before starting.

04 Fallback: Git — Full Code Backup Management

Git is a tool for developers to manage code versions, recording every change history and allowing rollback to any node at any time. When using AI to write code for videos, Git is essential as a fallback.

Send the following to OpenClaw to initialize and take over throughout:

Help me initialize Git in the current project directory and manage versions throughout.

1. Initialize: git init && git add . && git commit -m "init: project initial structure"
2. After that, every time I say "This version is good, save it for me," automatically git add . && git commit
3. If I say "It's broken, go back to the previous version," first show me the history with git log --oneline, and after I specify, roll back with git reset --hard

Now complete the initialization and tell me the result.

Develop a rhythm for commits: save every time you get a small module working, don't accumulate. If you accumulate and commit all at once, when something breaks, you can only go back to a much earlier point, losing all intermediate work. Just tell OpenClaw "This version is good, save it for me," and it handles it automatically — no need to remember commands.

If you're not familiar with the command line, you can also try the VSCode plugin Git Graph for a graphical interface to view nodes and roll back more intuitively.

05 The Complete AI Video Production Workflow

Step 1: Write the script first. Decide what to show on each page and what the copy is. Don't let AI do everything in one go; clarify the outline and direction first before moving forward.

Step 2: Prepare assets and place them in a fixed directory. Screenshots, icons, avatars, etc., all placed in advance into a fixed directory, such as public (Remotion) or assets (HyperFrames), for easy execution later.

Step 3: Confirm visual style with HTML storyboard. Use HyperFrames to quickly produce a version of HTML, setting the background color, font hierarchy, and accent colors. Fixing HTML is much faster than waiting for Remotion to render; move to the next step only when satisfied.

Step 4: Confirm the timeline plan. Have OpenClaw output the timeline first — how many seconds each segment lasts, what content appears. Manually confirm it's correct before letting it write React components.

Step 5: Component development + Git step-by-step commits. Agree on a commit rhythm with the AI, e.g., save every time a module runs. It's normal for AI to iterate 2-3 times when writing React; with Git backup, you don't have to worry about breaking things.

Send this workflow to your OpenClaw and have it remember it. Every subsequent video production will follow this sequence.

In the past, making videos with code was blocked by technology. Now technology is no longer the problem.

Any AI tool can handle the coding part; smarter models can do it even better. Use HyperFrames for quick batch content, and Remotion for more dazzling animations. For ordinary people running self-media, this is sufficient for daily production.

So the real bottleneck is aesthetics and content.

Whether that final video is worth publishing depends on your judgment of the visuals — something AI can't replace.