Rendering
An HTML animation is ready. Where is the MP4?
Prove a short HTML composition can export repeatably.
A webpage can look smooth while depending on real-time events, asynchronous assets and a particular playback history. A video renderer needs a precise answer to “what does frame 120 look like?” We will turn that question into a practical export checklist and a small frame-by-frame experiment.
ONE CLOCK. EVERY FRAME.
Same time. Same scene.
Seek to any frame, then return to it: the scene and readout match. Change the curve to compare the pacing. This Hermes teaching study explains a timeline; it is not a tool-generated result or performance benchmark.
What to know before you begin
Decide what you need to repeat
Screen recording is a quick way to share a rough preview, but it captures playback timing and the recording environment. For a deliverable that needs revisions, use a renderer that can request a specific frame. Do not assume a webpage playing smoothly will render correctly offline.
Prepare a deterministic timeline
Define duration, frame rate and dimensions. Make animation state derive from the requested time, including camera position and chart values. Load fonts and images before capture. Seed randomness if the design uses particles, and keep audio on the same timeline.
Inspect the actual file
In a HyperFrames project, preview with npx hyperframes preview and export with npx hyperframes render. Check the first and last frames, scene boundaries, sound synchronization and readability on a phone. Keep the source project so a text correction does not require starting over.
THE COMPLETE WALKTHROUGH
From input to delivery, step by step
01Define the delivery contract
Write duration, width, height and frame rate in one place. A 12-second composition at 30 fps has 360 frames, numbered 0 through 359. Decide whether the last pose is held or cut. A one-frame mismatch is easy to overlook in a preview and obvious in a loop.
02Remove playback-history dependencies
A position updated by “add a little each tick” depends on how many ticks occurred. A position calculated from frame number is reproducible. Apply the same reasoning to counters, camera paths, particle seeds and chart values. Scrub backward as well as forward when testing.
03Wait for inputs, not an arbitrary delay
05Keep sound on the same timeline
Place a cue at a known time, then inspect the encoded result around that event. A sound triggered by a separate timeout can drift from a renderer that is seeking frames. Review both the visible impact and the audible transient.
06Preserve a reproducible output recipe
Save the source revision, asset versions, output settings and a short review note. Re-render one known frame after changing dependencies. If it changes unexpectedly, isolate that difference before approving the whole film.
What to inspect at each stage
Use this editorial plan as an editable working document, adapting it to the actual assets and placement.
| Stage | Check | Evidence |
|---|---|---|
| Before capture | Fonts and images have loaded | A complete, stable frame zero |
| During capture | State comes from requested time | Repeated seeks match |
| After encode | Timing, audio and boundaries | Play the actual file |
| Delivery | Resolution and phone readability | Review in the target placement |
A complete request to adapt
This is an original example for this tutorial. Replace the placeholders with your task and retain the preparation, review and delivery requirements. Ask the agent to identify missing inputs before production.
Audit this HTML composition for MP4 export. Output: 1920×1080, 12 seconds, 30 fps. Check fonts and assets, real-time timers, randomness, pointer-dependent state and audio timing. Make all visual state seekable from frame 0 to 359. Export a short test and compare two captures of frame 120. Report any unsupported effects before rendering the full file. Keep the source and an export checklist.Where the process can get stuck
Why does a smooth preview still fail?
A preview follows browser time; capture may seek directly to a frame. Check which events your scene assumes have already happened. Also verify assets are ready in the capture environment.
How should I test a loop?
Play several repetitions and inspect the end-to-start transition. Match pose, camera, light and audio at the seam. A visually matching last frame is not enough if the velocity changes abruptly.
Which file should I send for review?
Send the encoded deliverable, not only a browser link. Include resolution, frame rate and the exact revision. A reviewer should be able to identify the same frame you are discussing.
APPLY IT TO YOUR PROJECT
Finish one small, reviewable output
Walk through the process with your own inputs. Save the first output and specific review notes: what works, what needs changing and how to reproduce it. Once the small test passes, extend the duration, complexity and delivery variants.
References & editorial notes
Consult the original projects for current capabilities, eligibility and setup. Exercises, timings, sample requests and review advice are Hermes editorial work. Creator outputs and teaching illustrations are labeled where shown.