81.8s Video, 15 Versions: Codex-Driven AI-Native Production Walkthrough

The author describes producing an 81.8-second product video (1920×1080) in 15 major versions using a pure Codex-driven AI pipeline. The human role was limited to setting goals, choosing directions, and giving feedback; Codex handled script, storyboard, animation, voiceover, music, mixing, review, and rendering.

Results

Final video links:

OSS:

https://embedding.s3.cn-north-1.jdcloud-oss.com/tingquan-v15-final-81-8s-1080p30-oss-video.mp4

Public OSS:

https://embedding.s3.cn-north-1.jdcloud-oss.com/public/2026-hackathon/tingquan-ai-native-video-v15-81-8s-20260907.mp4

Scope covered: script, storyboard, animation, voiceover, music, mixing, review, rendering. Collaboration mode: continuous human judgment, continuous Codex execution.

What AI Actually Removes

The shift is from coordinating multiple tools and specialists to a single agent maintaining the entire production chain. The human retains responsibility for:

Defining audience, core message, and success criteria

Selecting among AI-proposed narrative directions

Giving concrete feedback on each version

Guarding factual accuracy, aesthetic quality, and release decision

Codex takes over: material organization, script and storyboard generation, turning chosen direction into visuals, motion, and sound, revising segments and re-rendering on feedback, and maintaining assets, versions, and context across iterations.

Method 1: Let AI Structure the Story First

Instead of jumping to polished visuals, the team asked three questions: Why would the audience keep watching? What changes in the middle? What one sentence should they remember? The first AI task:

Read source material and propose three narrative angles.

Each angle written as hook–core change–result.

After selecting a direction, break it into shot titles, voiceover, visual actions, and durations.

Each shot carries one main idea; visuals answer exactly what the voiceover says.

The early script was a feature list. It was restructured into a causal event chain: problem occurs, AI finds clues, verifies and correlates, drives action. Existing screen recordings, runtime data, and product UI were reused; only sequencing, selection, and transitions changed. Practical tip: have AI inventory assets, then ask which shots can stay and which few new shots are needed to make causality work. Test script by listening to voiceover alone—if the story isn't clear, rewrite before animating.

Method 2: Use Visual References Instead of Vague Adjectives

Requests like “more high-tech” or “richer visuals” are ambiguous. The solution: browse HeyGen HyperFrames Examples , pick near-target clips (product launch, data story, flowchart, UI demo, motion graphics), and have AI deconstruct reusable “visual building blocks”:

Where information enters and where the eye goes first

How title, body, and supporting info are layered

How cards enter, hold, and exit

How shots flow from one information unit to the next

Which changes use animation and which stay static

Reference this case’s “information hierarchy, card entrance, and shot progression”; keep our brand colors and content; give me a static composition and a 5-second motion preview first, then expand to full video after approval.

This turns “I like this” into executable, verifiable constraints. No animation jargon needed—just point to what feels comfortable and what helps understanding.

The Key Foundation: What Is HyperFrames?

HyperFrames is an open-source HTML-to-video framework by the HeyGen core team (Apache 2.0). The agent writes HTML, CSS, and time-addressable animations; HyperFrames renders the web page—text, images, video, charts, animations—stably into MP4. The project files remain editable, so the next iteration continues from the same codebase. HeyGen also published their own product-launch video as a HyperFrames project, providing a real-world reference for shot organization, asset management, and motion design.

Why It Suits AI Video

AI speaks this language. Web code is structured text; instructions like “shrink the title,” “animate numbers sequentially,” “expand on click” map directly to DOM edits.

Every round stays editable. The full engineering artifact persists; copy, colors, data, timing, and animation can be patched locally.

Preview matches final output. HyperFrames seeks each timestamp and renders frame-by-frame; identical input reproduces identically, enabling screenshot-based review and version comparison.

Ready-made inspiration for the agent. The Examples gallery (product promo, dynamic charts, decision trees, kinetic type) and Catalog (captions, transitions, charts, social cards, effects) give concrete starting points. You watch, then hand the page plus natural-language requirements to AI.

Official Showcase Examples Worth Watching

Product launch: HeyGen × Stripe Product Launch , Product Promo

Web-to-video: Website → Video

Data and complex concepts: SpaceX Explainer , NYT Graph , Decision Tree

Rhythm and pacing: Kinetic Type , Music to Video

Design handoff: Figma → HyperFrames

Usage pattern: pick a segment, tell AI “borrow its information hierarchy and motion rhythm, swap in our content and brand.”

HyperFrames vs Remotion vs ChatCut: How to Choose

Each tool targets a different video problem:

HyperFrames – Agent writes HTML/CSS/time-addressable animation, then renders. Best for product UI, dynamic charts, process flows, motion promos with frequent natural-language revisions. Ideal for people who want AI to build visuals from ideas.

Remotion – React components describe every frame; includes Studio, Player, cloud rendering. Best for parameterized templates, batch video, embedding video generation in products. Suited for React-fluent teams building programmatic video systems.

ChatCut – AI agent operates a real multi-track timeline; human can fine-tune manually. Best for live-action editing, interviews, talking-head, subtitles, B-roll, multi-track packaging. Suited for those with lots of raw footage needing fast cut-down.

This project’s core was product UI, data, relationship graphs, and process demos with frequent copy and pacing changes, so HyperFrames fit. If the material shifts to interviews or heavy live-action, ChatCut becomes preferable; for developer-facing React video templates and batch rendering, Remotion is mature. They can combine: HyperFrames for motion segments, ChatCut for live-action edit and final packaging.

Method 3: Animation’s Job Is to Guide the Viewer

Static pages in video feel like flipping slides. Three diagnostic questions per second: Where should the eye look? Where does it go next? What information remains after the motion? The pivotal reminder: Expressiveness comes from stronger causality and evidence relay; animation delivers that chain to the viewer.

Self-check: for every claim in the voiceover, can the picture prove it? “Discover” → show the raw clue; “Analyze” → show extraction and comparison; “Result” → show the action landing on the next step. If visual evidence is missing, cut the line, weaken the claim, or add real assets.

Four go-to animation patterns:

Reveal information in relational order. Problem first, then clues and result; cards enter sequentially so the audience follows the causal chain.

Let the focal point “speak.” Number count-up, keyword highlight, scan-line sweep, node linking, mouse click—all signal the active change.

Make transitions continue the previous shot. The outgoing card, color, or motion direction becomes the incoming shot’s entry, reducing hard cuts.

Leave quiet moments. Pause after key conclusions so viewers finish reading; simultaneous motion everywhere dilutes focus.

After each round, AI auto-captures key frames into a timeline review image. Feedback like “third section too dense,” “three consecutive card screens,” “action leads voiceover by half a second” gets translated into layout, pacing, and transition tweaks, returning a playable version.

Method 4: Voice and Music from “Audible” to “Compelling”

Voiceover: Audition Roles, Then Generate Per Shot

Tested ElevenLabs, Anson, and Mossland Chinese voices; chose Mossland’s “Narrator·Steady” for its natural delivery in real long-form Chinese sentences, stronger native feel, and fit with the video’s restrained, credible tone. Practical audition method: test three real-copy types simultaneously—an emotional hook, an information-dense sentence, a closing tagline. Compare native feel, stress, terminology pronunciation, and long-listening fatigue. Only if all three pass does the voice suit the whole piece. Segmented generation lets you fix a single line (length, stress, emotion) by rewriting copy and re-rendering just that segment without touching the rest.

Music: Let Rhythm Follow the Story

After picture lock, feed the full video to a music model so it “watches” and generates candidates. Better than “give me a tech BGM”: describe narrative arcs—early investigation momentum, middle gradual opening, ending clear lift; overall restrained, leaving space for Chinese voiceover. Selection focuses on three moments: opening establishes mood fast, turning points are caught by music, closing tagline lands emotionally. Once chosen, AI handles length extension, crossfades, and voice ducking.

Concrete example: a candidate track was 4+ seconds short. Instead of hunting new music, the instruction was “keep the theme, extend naturally to the end, and lift energy at the tagline.” AI extended, crossfaded, and mixed; evaluation continued with “is voiceover clear?” and “does the ending settle?”

Intuitive questions suffice: Does the music fight the voice? Does the middle push forward? Does the end feel like “stop here”? Those answers guide the next AI round.

How One Piece of Feedback Becomes the Next Version

No need to translate opinions into technical parameters. The standard feedback structure has four parts:

Desired effect + reference visual + must-keep content + definition of done

Examples:

“This section reads like a feature list. I want the viewer to see the problem first, then how AI handles it; keep two key data points; show me 2 seconds before and after the change.”

“Borrow the card-by-card reveal rhythm from the official example; keep our brand colors; pause half a second after title before showing data.”

“Music competes with voice. Keep the forward drive, carve out space for narration, lift again at the tagline.”

“Consecutive screens look too similar. Keep information order, change spatial relationship, give me a full timeline screenshot for comparison.”

“Step back: are we stacking features or telling a forward-moving story? Keep shots that prove the solution works, give me another version.”

This is where AI offload is most visible: human expresses viewing feel; AI executes linked changes across script, visuals, audio, and version control.

How to Reuse This Method: 7-Step Process

Hand AI all materials, audience, distribution goal, and factual boundaries in one go.

Ask for three story angles; only pick direction, hold off on detailed visuals.

Browse case libraries, pick two or three references, have AI deconstruct composition, rhythm, and motion.

Produce one key shot and a short motion test to confirm visual language.

Expand to full video; use timeline review image to check information density and repetition.

Generate voiceover per shot; after picture lock, generate and iterate music.

Review in natural language; let the same agent continuously revise, render, and version.

Throughout, the human guards only three things: goal drift, factual errors, and whether the final cut is share-worthy.

Conclusion: AI Gives More People the Ability to “Make It Happen”

81.8 seconds, 15 versions—these numbers show video production shifting from complex multi-tool operations to a continuous dialogue around goals, references, and feedback. AI now absorbs the bulk of work from script to delivery. Humans can focus on higher-leverage tasks: understanding the audience, choosing the story, judging quality. Ideas that used to stall in slides or imagination can now be rapidly turned into watchable, revisable, shareable videos. If you had to present your project tomorrow, which first step would you hand to AI?