Render a 12-second video with HyperFrames CLI

This tutorial provides the actual 12-second MP4 from a local HyperFrames render, plus editable source and a reproduction procedure. The delivered file is 1280 × 720, 30 fps, 360 frames, H.264/yuv420p, with no audio stream. It is a conceptual SkillPick explainer—Discover → Preview → Download—made with original typography and CSS shapes, rather than a screen recording of the website.

Open or save the MP4. The poster is decoded from the finished video at six seconds. The recorded production run used HyperFrames 0.9.26 on 10 November 2026. This article reuses that run and its checked output; it does not claim a fresh render for this publication.

Brief and four-second scenes

Create an original silent 12-second SkillPick explainer at 1280x720,
30 fps: Discover -> Preview -> Download, four seconds per scene.
Use original typography and CSS shapes, not a live website recording.
Use a light canvas and indigo accent. Keep a stable header and progress rail.
State: Free skill packages. Model and API costs are separate.
Build a deterministic paused GSAP timeline registered for HyperFrames.
Check snapshots at 2, 6 and 10 seconds, then render the complete MP4.
No narration, stock footage, generated images or invented usage metrics.

The composition uses slide entrances for discovery, a scaling play symbol for preview and a descending archive tile for download. Scene visibility changes at four and eight seconds. A paused timeline lets the renderer seek to a specific frame without depending on elapsed wall-clock time. The source registers it under window.__timelines['skillpick-demo'].

Install the skill and the rendering tools

Download the ZIP from HyperFrames CLI, extract the complete folder containing SKILL.md, and retain references, scripts and original notices. Follow Your first agent skill and your Codex, Claude Code or Cursor guide for the installation directory. Start a fresh session and check availability.

The skill supplies workflow instructions; rendering also requires software. The recorded toolchain used Node 22.22.1, HyperFrames 0.9.26, GSAP 3.15.0, FFmpeg 8.1.1 and an isolated Chrome Headless Shell on Windows. Have Node 22+, npm, FFmpeg/FFprobe and a supported headless Chrome available before running the commands. The skill’s agent-loader compatibility was not tested by the render.

Get the editable project directly from this site

Save these text files into one new working folder, using the destination filenames shown. Do not keep the final .txt extension.

These are first-party editable sources. The public configuration omits the original optional block-registry setting; this composition uses no registry blocks. No vendor JavaScript is redistributed here. npm ci obtains GSAP 3.15.0 from npm, and prepare-assets copies its distribution to the local script URL. Preserve the package’s original license and copyright header in generated copies; its standard license remains applicable.

Check, snapshot and render

Run from the folder containing the downloaded index.html and package files:

$env:DO_NOT_TRACK='1'
$env:HYPERFRAMES_NO_TELEMETRY='1'
npm ci --registry=https://registry.npmjs.org
npm run prepare-assets
npm run lint
npm run check
npm run snapshot
npm run render

The scripts pin [email protected]. Snapshot uses snapshot . --at 2,6,10 --no-end --output snapshots --json; render uses render . --fps 30 --quality high --workers 2 --output render.mp4. The recorded run invoked the same render options on its composition directory, with an offline cached CLI. A new machine needs network access to obtain the dependencies.

Our initial managed-browser download stalled at zero bytes. After stopping only that render’s process tree, the run used the documented browser override with an existing isolated Headless Shell; the CLI reclaimed the stale lock. If your managed download stalls, point to a real installed executable before retrying:

$env:HYPERFRAMES_BROWSER_PATH='C:/path/to/chrome-headless-shell.exe'

This placeholder must be replaced with your installed path. Use an isolated headless binary rather than a running personal browser profile. Browser setup can vary across operating systems.

Export and verify the finished file

FFmpeg transcodes the actual HyperFrames render. These standalone-folder commands use local output names instead of the original repository’s publication paths:

ffmpeg -y -i render.mp4 -an -c:v libx264 -preset medium -crf 22 -pix_fmt yuv420p -movflags +faststart output.mp4
ffmpeg -y -ss 6 -i output.mp4 -frames:v 1 poster.png
ffprobe -v error -show_streams -show_format -of json output.mp4

The original lint and runtime/layout checks passed; the check reported 47 of 47 contrast checks passed. The renderer captured 360 frames. The final output is 255,824 bytes, lasts 12.000 seconds and has no audio stream. Its moov atom precedes mdat for fast start. Decoded final frames at two, six and ten seconds were visually inspected for distinct scenes and readable, uncropped text.

For your reproduction, inspect all three snapshots, play the whole exported file and compare FFprobe’s dimensions, duration, frame rate and streams with the brief. A successful lint command alone does not prove that a finished MP4 looks right. Different fonts, browsers or operating systems may change exact pixels and file size.

Costs, limits and common questions

No cloud renderer, paid API, authentication, narration or stock asset was used in the recorded media run. Your agent subscription or model/API usage is separate from the free skill download; local rendering consumes your machine’s resources. Do not infer universal agent compatibility or a production video service from this single local test.

Why is there no sound? Silence is part of the brief; the file contains no audio stream. Adding speech requires a separate approved script, audio source and timing pass.

Can I reproduce it without an agent? Yes. Download the editable files and use the pinned commands after installing the prerequisites. An agent is useful when changing the design or applying skill instructions.

Is the MP4 merely an FFmpeg animation? HyperFrames captured the actual composition frames. FFmpeg then converted that render to a browser-compatible publication file and decoded its poster.

Explore media and video skills and the video production guide, or compare this result with the editable landing page.