You asked whether there's a skill behind the videos. There is, and here it is: the workflow, the voice setup you shared, and the lessons I burned through a lot of renders to learn. Everything here works for your own products too.
HyperFrames renders video from HTML. You write your scenes as styled, animated web pages, the tool turns them into a real MP4 with narration and captions. The magic is not one clever step, it is running the same quality checks on every change instead of eyeballing it once at the end.
Think of each scene as a slide built in HTML and CSS, with a timeline that says when things move. HyperFrames plays that timeline back frame by frame in a headless browser and records it. Because it records deterministically, the scenes have to be reproducible: no live clocks, no randomness, no network calls mid-render. That constraint is what makes the output consistent every time.
Write a SCRIPT.md: one line of narration, one on-screen headline, and any screen-capture cue per scene. Skipping this is where projects drift.
The voiceover drives all the timing, so make it first. This is where your ElevenLabs voice comes in (details below).
One full-frame scene per beat, a caption strip, and the audio, each on its own track.
Measure each narration clip, give each scene the clip length plus about 1.3 seconds of breathing room, and snap all the numbers to one decimal place.
lint, validate, inspect. Zero errors before moving on. This is the single biggest quality lever.
Transcribe the rendered voiceover so the words on screen match the words spoken, exactly.
Open it in the Studio editor, watch it, tweak it. Never auto-render, that is the gate.
Draft quality while iterating, high quality to deliver, then publish for a shareable link. Large or 4K jobs can go to the cloud renderer.
You added me to your ElevenLabs and shared the voice Dylan Platelle
Voice ID: wJ4U84X4t4rzenAmCmRG · Model: eleven_multilingual_v2
Good default settings: stability 0.5, similarity 0.75, style 0, speaker boost on. Clean the script before sending it to the voice: no em-dashes, and spell out abbreviations, because it reads the text literally.
Record narration, then fit the scenes to it. The result breathes.
You end up trimming narration to fit and it sounds rushed and clipped.
A no-copyright track, looped and volume-normalized, with a soft crossfade at the loop point.
Synthesized tones read as low rumble on real headphones. It fails the second someone listens properly.
Generate them from the actual recorded voiceover so the text matches word for word.
If the caption says one thing while the voice says another, viewers notice immediately.
Reads cleanly and passes the accessibility checker.
Ask for 7 nodes and you may get 9. The image looks polished so the error hides. Count them against the brief before shipping.
You need Node 22+ and FFmpeg. Then:
# scaffold a project (bundled skills come with it) npx hyperframes init my-video # check your providers before generating audio npx hyperframes auth status # after every change, the three gates npx hyperframes lint npx hyperframes validate npx hyperframes inspect # preview for approval, then render npx hyperframes preview npx hyperframes render --quality high --output out.mp4
I am also sending a companion .md file written for your Claude. Drop it in your project and your Claude will follow this exact workflow, including the gotchas, without you having to steer it each time.