01 / FROM IDEA TO OUTPUT
A workflow you can follow
Build one scene before a whole film
Create the project, choose its output size and place one title with one visual. Keep fonts and images available locally. A small composition lets you diagnose rendering issues without searching through a long timeline.
Make every state seekable
The renderer asks for a particular time; the animation must reach that state without waiting for the previous frame. Derive the camera, text and data values from that time. Use the frame lab below to see the difference between scrubbing a timeline and merely letting a page run.
Bind layers to the same clock
Assign each clip a start and duration. Make audio cues explicit rather than triggering them from a hover or a timeout. Preview transitions at normal speed, then seek around their boundaries to catch missing or doubled frames.
Export early, then scale the design
Render a short clip before adding particles, shaders or a second aspect ratio. Keep a known-good project version. When a change breaks export, compare the added asset or timing behavior against that baseline.
02 / START HERE
Make the brief your own
This is an original Hermes example. Replace the inputs and delivery requirements before sending it to your agent. It is not the showcase creator’s original prompt or a promise of the same result.
In this HyperFrames project, build a 12-second explanation of a fictional queue. Use three jobs labeled A, B and C and one worker. Explain waiting → processing → complete. 1920×1080, 30 fps. Put every state on a seekable timeline and label all values as example data. Load fonts before capture. First export 3 seconds; then deliver the complete MP4 and source.Real assets, the mechanism to explain and verified numbers.
HTML compositions · Specify dimensions, duration and files.
Stills → short test → full output → independent playback or interaction.
03 / READ THE WORK
Scrub a frame. Understand the timeline.
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.
04 / REVIEW & REVISE
When the result feels wrong
The first captured frame is blank
Verify asset loading and the composition’s initial state. Test an explicit seek to time zero before the full render.
Particles jump when you scrub backward
Use seeded randomness and time-derived positions. Accumulating positions on every browser tick makes a scene dependent on playback history.
Audio lands late
Check the encoded file at the visual impact and compare the waveform position. Fix the cue on the shared timeline, not with a separate playback delay.
Questions before you begin
Can I reuse an existing webpage?
It can supply assets and layout ideas. A reliable render still needs known duration, dimensions, loaded assets and seekable animation; pointer-triggered behavior needs a scripted equivalent.
What does the preview demonstrate?
Actova is the Motion Director author’s example built around HyperFrames. The local frame lab is a Hermes teaching demo; it demonstrates a shared clock and is not a benchmark of HyperFrames rendering.
Sources & display notes
The original projects are authoritative for capabilities and setup. The production recipes, sample briefs and review advice here are Hermes editorial work. A recommendation is not a claim of exhaustive tool testing.
HyperFrames repository & quickstart ↗Official documentation ↗Actova source project ↗
