HyperFrames turns an editable web composition into a video. This guide follows one original local workflow: plan a short motion study, author a paused timeline, inspect it in Studio, run checks, render an MP4 and review the exported file. It includes our editable project and a local ffprobe checker so you can follow the evidence rather than stop at a successful render command.
We executed hyperframes 0.8.193. At our recorded check, GitHub showed a newer 0.8.194 tag while npm still supplied 0.8.193. An attempt to execute the newer package returned ETARGET. The commands below pin the package we actually ran. The observation is dated October 25, 2026 at 03:07 UTC; it is not a promise about the latest version when you read this page.
What HyperFrames does in this workflow
Our composition uses HTML, CSS and a paused GSAP timeline. It contains one moving shape, static labels and a ruler. HyperFrames captures and encodes the animation into a video. No AI model inference, voice generation or hosted HeyGen render was used in this example.
A coding agent can help author the composition. That does not make every rendered pixel a generative model output. Keeping these roles clear helps you reproduce an animation, identify external costs and decide which source files a collaborator needs.
The official HyperFrames quickstart describes agent, Studio and CLI entry points and explains that local rendering does not use HeyGen credits. Optional external media services and the coding agent may have their own costs. This article measures only the local authored example.
Start with a concrete three second brief
Our brief fixes a 1920 by 1080 canvas at 24 fps with no sound. The title remains visible. A mint marker holds from zero to half a second, moves linearly across 1440 pixels during the next two seconds, then holds until the three-second end. One scene avoids an unnecessary edit boundary.
That gives a checkable target of 72 frames. It also gives two timing boundaries to inspect: entry into motion and the stop. Before authoring a longer explainer, write down its aspect ratio, duration, intended audio, exact text, scene order and export requirements. A vague instruction to make it cinematic is difficult to validate.
Open the editable HyperFrames project
Download and unzip the original shutter study project. It includes the root composition, one scene, configuration, storyboard, specification and review notes. It excludes caches and unrelated catalog snippets. Keep the original folder as a baseline and edit a copy.
cd shutter-study
npx --yes hyperframes@0.8.193 previewThe source loads pinned GSAP from jsDelivr and resolves the Inter font through the rendering environment. It is editable source, not an entirely offline dependency bundle. Save the package version, fonts and external dependencies alongside your production handoff.
Continue editing in Studio, a coding agent or the Framey desktop application described by the CLI. You can also inspect the HTML directly. Our delivered kit preserves the exact tested composition; these editing options are not separately tested desktop application integrations.
Keep the timeline deterministic
The root mounts a scene with an explicit start and duration. The scene registers a paused timeline and places the linear move at half a second. The animation does not depend on wall-clock time, random values or asynchronous network responses. Seeking to a time should describe the intended state at that time.
Animate the marker rather than shifting the whole composition. Keep text static during the small test. When adding generated images or clips, save approved inputs before rendering so a remote request does not silently replace them halfway through production.
For this comparison the root requests motion blur, a 180 degree shutter, a samples attribute of 16 and the filter tier. The actual renderer log reported filter tier, one mover and zero failed frames in Chrome 152. We report that runtime line rather than treating an attribute alone as proof of the backend used.
Run checks and inspect the preview
npx --yes hyperframes@0.8.193 check
npx --yes hyperframes@0.8.193 snapshot --help
npx --yes hyperframes@0.8.193 previewCheck the snapshot options for the pinned CLI, capture beat and phone review sheets, and watch the composition in Studio. Our lint and runtime checks found no errors. Layout examined nine samples with no issues; contrast checked 25 items across five samples and passed all 25; craft examined 24 samples with no findings. The automatic motion audit was disabled and sampled zero frames. It did not pass a motion audit.
We inspected the beat and phone sheets and the Studio preview, and a separate visual reviewer reported no critical or high-priority issue. That scope is one original study. It does not establish readability or correctness for a different script, a substituted font or a longer animation.
Render the actual video
npx --yes hyperframes@0.8.193 render . --fps 24 --workers 1 --quality looks --output shutter-study.mp4Run the command inside the unzipped project. Keep the terminal output with the delivered video. Our export contains one H264 video stream at 1920 by 1080, 24 fps and three seconds, with 72 frames and no audio stream. A second local render of the 180 degree version matched the first file byte for byte. That is one repeat on the same worker, not a cross-host determinism guarantee.
Watch this clip and view its details
Watch the exported file rather than assuming the Studio preview and MP4 are identical. Check the first frame, the start of movement, a moving midpoint, the stop and the final visible frame. Read the static labels on a phone. If your brief includes sound, listen to the full export and inspect timing against the picture.
Probe the MP4 and compare it with the brief
ffprobe -v error -show_streams -show_format -of json shutter-study.mp4Paste that JSON into the local checker above. Set your target width, height, frame rate and duration. Tick Require an audio stream only when your delivery calls for one. The checker compares one video stream, dimensions, average frame rate, duration within one target frame, nominal frame count and the audio-stream requirement.
Unknown frame count remains unknown and requires manual review. A matching average frame rate does not establish constant per-frame cadence. A present audio stream does not establish correct narration, audible sound or synchronization. The result says metadata fits the brief only when every metadata check matches; media acceptance remains unevaluated.
The exported JSON omits paths, tags and unreviewed fields from your pasted probe. The CSV contains the named checks and whether they match. Download our sanitized actual probe, example review and review CSV to inspect the default case.
Measure cadence separately from average frame rate
For the published study we decoded all 72 frame timestamps and compared them with an exact 24 fps grid. The largest difference was below two microseconds, including timestamp rounding. We also decoded a four-row strip through the marker and measured a median 30-pixel advance per frame during linear movement.
The 45, 180 and 360 degree renders produced increasing middle-frame threshold footprints. Read the shutter speed and shutter angle comparison for the ideal timing formula and the difference between a trail estimate and a decoded filter footprint. These checks concern the saved clips, not arbitrary HyperFrames projects or physical cameras.
Use the workflow for an actual campaign
A useful first campaign test is one approved product visual, one exact claim and one motion treatment. Keep the first pass short enough to review every frame. Once the layout and timing hold up, add the remaining scenes and sound with explicit acceptance criteria.
Create an original product image in Clout Marketing Studio or a scene in Clout Cinema, inspect the result, then treat that approved file as a saved input to the authored composition. Clout generation and HyperFrames rendering are separate steps. This study does not claim an automatic integration or a quality benchmark for generated footage.
For text-led composition, the kinetic typography guide covers readable type and timing. Start with the message the viewer must understand; add motion where it helps that message survive a short mobile viewing.
Download the evidence and repeat the study
The runtime record identifies the executed version and measured files. The render check record preserves its scope, including the disabled motion audit. The source audit records hashes of seven official documents pinned to the source revision matching our package.
Use the native measurement script with FFmpeg and NumPy, following the reproduction notes. Review the asset hashes before comparing your copy. Package availability, browser rendering and fonts can change; preserve your own environment record with each accepted delivery.
