Automated video editing with Codex: a practical HyperFrames guide from source clips to MP4

Build a 30-second overseas product video for a desk cable organizer: set up the tools and skills, prepare footage, plan the timeline and English captions, review revisions and export. Includes reusable prompts, Chinese diagrams, troubleshooting and a delivery checklist. Free to read.

In this guide I use footage you record yourself to plan a 30-second vertical product video. The target deliverables are a playable MP4, an editable HyperFrames project, a shot-and-caption list and an export review record. For the next product, keep the project structure and replace the footage and copy before asking Codex to adjust the timeline.

The practice product is a desk cable organizer: messy cables, placing the cables into the organizer, then showing the tidier desk. The first version uses English on-screen copy without voiceover. Add background music only if you have licensed material. Get the sequence working before adding elaborate effects.

01 · Understand what the tools actually do

Codex interprets the request, organizes inputs, writes the plan and edits the project. HyperFrames renders HTML, CSS, media and seekable animation into video. HTML is the source of the visual composition, not the final deliverable. A project can also contain configuration, storyboard files, media and sub-scenes.

This approach suits product explainers, graphic sequences, tutorials, assembling existing clips and revising versions. One sentence can start the task; clear assets, facts and audience make the result more useful. Detailed filler removal, multicamera synchronization and sophisticated color grading need additional tooling and workflows.

HyperFrames is maintained in HeyGen’s public repository under Apache-2.0. Software licensing does not grant rights to footage, music, fonts or brand marks. Commands were checked against CLI 0.8.139 and the official documentation on October 7, 2026. Version, command help and environment diagnosis were checked locally. The product footage plan, timeline and copy below are replaceable exercises; a complete rendered product video is not claimed as a tested result.

02 · Prepare your computer, account and tools

Use a computer that can run Codex and Node.js, a working Codex account and network access. This article is free to read; Codex plan and usage limits depend on your account. Local HyperFrames rendering does not require buying a HeyGen avatar plan. Image, speech or music generation and cloud rendering can involve separate services or charges; none is required here.

The four basics are Codex, Node.js 22 or newer, FFmpeg with FFprobe, and Chrome usable by HyperFrames. Docker, transcription and music-generation models are optional for this exercise. Inspect individual diagnosis results rather than installing every optional component.

Codex: sign in and make sure you can create a task and open a local project folder. If needed, follow the linked beginner guide before returning.

Node.js: download the appropriate LTS installer from the official site and use version 22 or later. Reopen your terminal after installation. Use PowerShell on Windows or Terminal on macOS. Run the following commands separately.

Codex from Zero to One: Setup, Everyday Features and Overseas Business Projects

Official Node.js download

node --version
npm --version
npx --version

Completion: node reports a supported v22, v24 or newer version; npm and npx both report versions. For command-not-found errors, reopen the terminal, then ask Codex to inspect PATH and the installation location. Do not paste account passwords or server keys into chat.

For FFmpeg on macOS with Homebrew already installed, run the next command. Otherwise follow Homebrew’s official installation instructions first. On Windows, use the Windows-build links from FFmpeg’s official download page, extract the package and add the bin folder containing ffmpeg.exe and ffprobe.exe to PATH. Reopen PowerShell. Do not run brew on Windows.

brew install ffmpeg

Official FFmpeg download

Homebrew installation instructions

ffmpeg -version
ffprobe -version
npx hyperframes@latest --version
npx hyperframes@latest doctor

On the first npx run, npm may ask to download the package. Confirm the package name is hyperframes before continuing. doctor checks Node, storage, FFmpeg, Chrome and other components. Confirm the basics needed for this workflow; missing optional transcription, TTS, music or Docker components do not prevent the no-voiceover version.

If rendering Chrome is missing, browser ensure finds or downloads the browser used by HyperFrames. The first download can be substantial and slow. Avoid starting duplicate installation tasks while progress is visible.

npx hyperframes@latest browser ensure

03 · Install the skills and create a project

Install the HyperFrames core skills so Codex follows the composition and rendering contract rather than writing an ordinary webpage. The update command installs or refreshes core skills from the current repository; it does not generate a video. Initial setup may require network access and installation confirmation. Reopen the Codex task afterward and verify the hyperframes skill is readable.

If you already have an installation, check the project version as well. Existing projects may pin an older CLI; updating skills alone does not change that pin.

npx hyperframes@latest skills update

Open the parent folder where you want to keep the project and create cable-organizer-video there. Initialization creates the folder; enter it before previewing or rendering. A short English name with hyphens makes paths easier to copy.

If that folder already exists, use a new name or inspect the existing project rather than overwriting it. --resolution portrait selects 1080×1920. --non-interactive uses the supplied flags without an interactive wizard.

npx hyperframes@latest init cable-organizer-video --resolution portrait --non-interactive
cd cable-organizer-video

Open the generated folder as the current Codex project. You should see index.html and project configuration; additional files vary by version. All later terminal commands run inside this project directory. Codex can run local commands for you, but review the preview before agreeing to the final render.

Inspect the cable-organizer-video project without authoring video content.
1. Confirm the working directory and list the entry and configuration files that actually exist.
2. Read the available hyperframes skill. If it is missing, identify the missing location and installation method; do not claim to have read it.
3. Check Node.js, FFmpeg, FFprobe and Chrome for local rendering.
4. If project scripts pin a HyperFrames version, report it and check upgrade status using the official upgrade --project . --check command.
5. Prepare locally only. Use no cloud rendering or paid models and submit no external feedback.
End with ready to proceed or a specific missing-items list.

04 · Record three clips instead of making AI guess

The practice audience is overseas home-office users with several desk cables. Focus on one problem: cables drop off the desk and are awkward to retrieve and organize. Verify that your actual product supports the demonstrated use. Practice copy is not evidence that every organizer can hold every cable.

Record three vertical clips, roughly 8–10 seconds each, preferably 1080p at 30fps with consistent lighting and camera position. Clip one shows the messy desk and a cable dropping. Clip two shows installation, cable placement and retrieval. Clip three shows the tidier result. Record complete, slower actions with one second of extra footage at both ends. Avoid three static product shots.

Name the clips 01-problem.mp4, 02-demo.mp4 and 03-result.mp4, and add a clear product.jpg. Put them in the project’s assets folder; ask Codex to create it if needed. Record installation method, supported cable sizes, material, price and destination link in product-facts.md. Mark unverified information as pending.

Music is optional. If licensed for your intended use, name it bgm.mp3 and retain the source and permission record. Otherwise begin without music. If you have no real footage, use your own still photos for an animated graphic version and identify that it does not demonstrate the actual operation. Do not invent before-and-after results.

Organize the assets without authoring the final composition or changing source files.
Product: desk cable organizer. Audience: overseas home-office users with several cables.
Use only the product facts verified in my physical demonstration and product-facts.md. Keep other fields pending.
Read the actual files assets/01-problem.mp4, 02-demo.mp4, 03-result.mp4 and product.jpg.
Use FFprobe to report duration, dimensions, frame rate, audio tracks and decodability.
If you can actually inspect frames, check beginning, middle and end before describing content. Otherwise state that you have not seen it; do not infer shots from filenames.
Create assets-audit.md with parameters, usable source ranges, subject position, risks and missing assets.
If orientation or frame rates differ, propose working-copy conversion while preserving originals.
Use licensed bgm.mp3 only if present. If absent, record no music and call no generation service.

After this step you should know clip duration, usable sections, whether the installation action is complete and whether the vertical crop would cut off hands or the product. If assets-audit.md only says the assets look good, request filenames and time ranges. Confirm content by watching it yourself; parameter checks do not prove that the visuals were reviewed.

05 · Plan the 30-second structure and English copy

I divide the first draft into six sections, then ask Codex to choose usable source ranges.

0–3s: a cable dropping off the desk, with “Still chasing your charger cable?”
3–8s: product and verified installation method.
8–16s: a complete cable-placement and retrieval demonstration.
16–23s: matched-angle desk comparison without invented results.
23–27s: a close-up with one verified benefit.
27–30s: a closing line such as “See how it works.” or your actual product-page direction.

This is an editing exercise, not a performance guarantee. If footage cannot fill a section, shorten it, insert your own product photo or revise pacing rather than padding with repeated clips.

Read product-facts.md and assets-audit.md. Create storyboard.md and captions.md only; do not author HTML or render.
Target: 1080×1920, 30 seconds, English on-screen copy for home-office users, using the desk cable organizer.
Use sections 0–3, 3–8, 8–16, 16–23, 23–27 and 27–30 seconds.
For each section list output start/end, source filename, source in/out, visual task, English copy, Chinese explanation and any pickup shot.
Use short copy with one idea at a time and no more than two lines per screen. Avoid best, guaranteed and unsupported performance claims.
Keep complete installation and retrieval actions. Match the comparison angle.
Distinguish source timestamps from output timestamps. Do not include unverified materials, price, cable sizes, load claims or certifications.
No unlicensed music, voiceover or AI-generated assets in the first draft.
Check exactly 30 seconds and source ranges within file duration, then ask me to confirm the plan.

Review whether section two has real installation footage, whether the comparison shows the same desk and whether copy overstates the product. If acceptable, tell Codex to proceed with this storyboard. When testing a new hook, change the first three seconds rather than rewriting the entire approved sequence.

06 · Have Codex author a renderable project

Now turn the approved plan into the project. The key requirement is seekability: previewing second twelve and rendering second twelve should show the same visual state. Web animation driven by setTimeout or scroll events does not necessarily render correctly as video.

Ask Codex to read the HyperFrames core contract and use supported timeline, source-range and seekable-animation rules. Avoid competing playback systems. Keep images, footage and fonts local when possible so external downloads do not break the render.

Use the hyperframes skill and read project rules plus the approved storyboard.md, captions.md and assets-audit.md to author this 30-second vertical product video.
Requirements:
1. Use real assets only. No cloud render, paid generation, purchases or external feedback.
2. 1080×1920, 30fps, exactly 30 seconds. Match output and source ranges to the plan.
3. Follow supported timing attributes, framework-managed media and seekable animation. Do not substitute webpage timers for the video timeline.
4. Use simple cuts, complete actions and light text entrances. Preserve actual product color, structure and demonstrated effects.
5. At most two lines of English copy. Avoid platform buttons and bottom overlays. Initial guide margins: about 90px sides, 180px top, 280px bottom; verify on the target platform.
6. Use licensed bgm.mp3 only; no voiceover by default. Avoid unexpected noisy source audio.
7. Preserve originals, list modified files and do not overwrite previous exports.
8. Lint during the initial pass; run check --snapshots on the complete structure and fix sustained overlap, missing assets and contrast errors.
9. Start local Studio after checks pass and return the actual printed preview URL. Stop for review without rendering.

If Codex only says completed, ask for changed files and check results. An HTML file does not prove the video is usable; automated checks do not replace watching the whole sequence. browserSkipped means the browser audit did not run, not that visual checks passed.

07 · Preview and request precise revisions

npx hyperframes check --snapshots
npx hyperframes preview --background

Open the Studio URL printed by the command. The preview often uses port 3002, but an occupied port can change it; use the actual output. Keep the #project/cable-organizer-video part rather than copying only localhost. The preview server must stay running.

Play the entire sequence, then inspect transitions at 0, 3, 8, 16, 23 and 27 seconds. Check cropping of hands and product, copy length, action continuity and audio changes. Copy must remain readable at phone size, not just on a large monitor.

Revise only the current video without redesigning it.
1. Keep the opening footage at 0–3s and use “Your cable keeps disappearing?” on no more than two lines.
2. At 8–16s, preserve the full hand and product; inspect the source before changing the crop.
3. At 16–23s, move comparison copy above the product.
4. Keep three seconds for the closing text; add no unverified prices or links.
Preserve other approved assets, pacing and total duration. List changes, rerun check and refresh the preview. Do not render yet.

“Make it premium” is vague. “At second eight, crop closer so installation is clear, keep the entire hand gesture and move copy above the product” is actionable. After a change, seek backward and forward to check that animation reaches the correct state.

08 · Export only after reviewing the preview

First export a draft to verify the render path and actual result; then export delivery quality. --output sets explicit filenames to keep versions separate. Run inside the project, writing to renders; ask Codex to create that folder if missing. Render time varies with hardware and media.

Scaffolds can pin CLI versions in npm scripts. Inspect those scripts and use the project’s render wrapper or the same pinned CLI with the requested flags. Avoid mixing versions inadvertently. The npx examples are the standard form when no other project wrapper applies.

npx hyperframes render --quality draft --fps 30 --output renders/cable-organizer-v1-draft.mp4
npx hyperframes render --quality delivery --fps 30 --output renders/cable-organizer-v1.mp4

Do not automatically run both. Render and watch the draft first. If revisions are needed, return to Codex before the delivery render. You can stop at the draft for an initial experiment.

I have reviewed the preview. Run a local draft render only.
Use the project’s pinned HyperFrames version, 30fps, draft quality, output renders/cable-organizer-v1-draft.mp4.
If that file exists, create v2 rather than overwriting it. No cloud render or paid service.
Use FFprobe to report duration, resolution, frame rate and audio tracks, then review playback.
If you cannot actually watch or listen, state that limitation rather than claiming perfect output. Stop at draft delivery and do not publish to a platform.

09 · Verify the MP4, not only the render message

ffprobe -v error -show_entries stream=codec_type,width,height,avg_frame_rate:format=duration,size -of json renders/cable-organizer-v1.mp4

Check six things. First, the file is nonempty and plays. Second, duration is about 30 seconds, resolution 1080×1920 and frame rate matches the target; 30/1 means 30fps. Third, watch from start to finish for black openings, action jumps and abrupt endings. Fourth, check spelling and phone readability without platform-overlay obstruction. Fifth, listen to the whole soundtrack for clipping or inconsistent levels; no audio track is expected for a silent version. Sixth, verify claims, media rights and destination links.

FFprobe checks file parameters, not visual quality, factual accuracy or sound. Record reviewed only after actual review, rather than treating render success as approval for advertising.

10 · Troubleshoot in this order

npx missing or Node too old: inspect node --version and PATH, then reopen the terminal rather than repeatedly rendering in the wrong environment.

Slow downloads: inspect npm or Chrome download progress and connectivity. Do not run duplicate installs. Network failure does not prove the project is broken; avoid untrusted packages and mirrors.

Missing FFmpeg or FFprobe: install them, confirm version output and rerun doctor. A media player does not provide FFmpeg.

Missing pictures or black footage: check filename case, extension and assets paths. Play the source locally, then inspect network and decode findings. Preview playback alone does not prove readiness at every render sample.

Preview animates but export freezes: check seekable timelines and framework media rules, especially timers, autoplay and competing playback systems. Do not conceal structural problems with longer waits.

Text overflow or obstruction: request the finding timestamp, selector and text bounds, then fix size, wrapping and spacing rather than ignoring every warning.

Slow render or insufficient memory: close unused programs, use draft quality and, if needed, --workers 1 to reduce concurrent Chrome instances. Convert oversized sources into working copies, preserving originals.

Chrome cannot start: run doctor. If the agent sandbox explicitly blocks browser startup, run the same command in your local terminal. Do not disable protections or call static checks a video review. Cloud rendering needs a separate service and cost decision; it is outside this workflow.

Diagnose only this failed HyperFrames operation without rebuilding the project.
Failed command: [paste actual command]
Relevant error: [paste a few lines with personal paths, credentials and account data removed]
Check directory, CLI version, required dependencies, source paths and the exact timestamps/selectors in the report.
Classify the issue as environment, assets, timeline or render resources with evidence, then propose the smallest fix.
Preserve source files and validated scenes. Do not ignore all warnings, disable protections, call paid services or submit external feedback.
Rerun the same check and report exactly what passed and what remains unverified.

When export fails after replacing assets, inspect the project and version

Preserve the first project that exports correctly before replacing media. Keep clips, narration and images in the project asset directory with descriptive names. An image visible from a remote URL in a browser may not be available during offline rendering. Check references after renaming or moving files rather than repeatedly reinstalling tools.

Before diagnosis, ask Codex for the working directory, project entry, HyperFrames version, command and exact error. Current official guidance supports npx hyperframes skills update for core skills, but updating skills and upgrading a project’s rendering dependencies are different actions. Keep a working project version and configuration instead of upgrading everything to fix a path.

Scrub the preview forward and backward, restart it and check caption and animation timing. Open the exported MP4 in a system player and verify that it is the new file, not empty or stuck on the first frame. Retain the source project, video, asset list and version notes. Revise a copy rather than overwriting a delivered version.

Diagnose the current HyperFrames project without upgrading dependencies or overwriting the old export. Confirm the directory, entry, CLI and pinned versions, asset references and failed command. Distinguish missing files, decode failures, fonts, non-seekable animation, audio/duration settings and renderer startup. Use actual logs and do not invent successful checks. Preserve the original, fix the identified cause and make a draft export with the existing version and a new filename. Inspect image, audio, captions and duration, listing remaining manual checks. Explain any need for paid services, uploads or upgrades first.

11 · Adapt the workflow to your business

For ecommerce, keep the problem → use → result → close-up → direction structure and replace it with your real product. Make an organic version first; verify platform specifications and claims before advertising.

For export sales and manufacturing, use application → process → inspection → delivery with actual factory footage. Include certifications, capacity and lead times only with evidence. A first video can use process titles without voiceover.

For personal brands and courses, use screenshots, method steps or authorized clips. For long spoken footage, get an accurate transcript and source ranges before removing content rather than cutting arguments from memory.

For additional languages, copy the project version and translate captions, then revise wrapping and hold duration. Caption replacement is not voice translation or lip-sync. English in this article means on-screen copy only.

Copy the approved cable-organizer-video project into a new product version without changing the original.
New product: [name]
Market and audience: [details]
Verified benefits: [facts only]
New assets: [path]
Keep 30 seconds, 9:16 and the six-section structure. Audit new assets before updating the plan and English captions. Do not batch render immediately.
List footage that cannot be reused, pickup shots and facts/copy that must change.
Wait for plan approval before editing, then check and preview. Do not publish automatically or call paid generation.

12 · Completion checklist

□ Codex reads the project and HyperFrames skill; necessary Node, FFmpeg, FFprobe and Chrome checks work.
□ Product facts and media sources are documented and originals backed up.
□ Source ranges and output ranges are explicit, totaling 30 seconds.
□ No invented materials, prices, certifications or results.
□ check actually ran, browser audits were not skipped and sustained errors were resolved.
□ Full Studio playback and seeking work; copy is readable on a phone.
□ MP4 plays with the intended duration, dimensions and frame rate.
□ Audio was actually listened to, or the output is explicitly silent.
□ Captions, media rights and destination link were reviewed; nothing was auto-published.
□ Keep storyboard, captions, project, video and review notes for future revisions.

Official references and updates

HyperFrames repository and license

HyperFrames quickstart

HyperFrames documentation

To apply the workflow to your own product with further guidance, join the AI Super Player Global Marketing Circle for more detailed video tutorials, member courses and Q&A. Complete your first video using this free guide, then bring specific questions about assets, content or your international business.