Tutorial: Render your first MP4 in 4 steps with HTML教程：四步用 HTML 渲染出第一条 MP4

HyperFrames has two hard dependencies: Node.js 22 or later, and FFmpeg. First use node -v to confirm the version, then upgrade below 22; then run ffmpeg -version to confirm that FFmpeg is in path - if not, rendering this step will directly fail, and the error message will usually not directly tell you "missing FFmpeg".

The illustration is the official demo animation. On the left is the HTML code, and on the right is the rendered image. Take a look at the effect first, and there is an expectation in your heart: you will eventually deliver not a recording screen, but a reusable, version-manageable HTML.

Windows users are advised to operate under WSL or Git Bash, the path and the installation of FFmpeg will be a bit easier.

Execute npx hyperframes init my-video build project, then cd my-video. This step prepares the skeleton, sample combinations, and local rendering dependencies.

The core of the project is the HTML composition file - every frame of the video is calculated from it. Changing it, and then previewing or rendering, is the complete development cycle.

If you are not sure where to start, there is a ready-made set of templates and components to choose from, and the drawings are a preview of the design template in the official template library. Pick the one that's closest to your idea and swap out copy and material much faster than starting with a blank document.

Run npx hyperframes preview, which opens the preview in the browser and supports hot reloading. Adjust the CSS or animation timeline, save, and update the screen instantly - this step allows you to try the effect without rendering the entire video repeatedly, especially for long videos.

You can also check the "addressability" of the animation in the preview: the animation of HyperFrames can be positioned to a specific point in time, which is the basis of its deterministic rendering, and means that you can skip to the 3.2 second to see which frame is correct.

If the picture does not match the expectation, run a static check such as lint/check first, and most problems can be pointed out before rendering.

After confirming that the preview is OK, run npx hyperframes render to output MP4. The same copy of HTML renders consistently each time, so it is ideal for pipelining batches of outputs.

If you want to go further, load the skills into the agent: Claude Code uses claude plugin marketplace add heygen-com/hyperframes plus claude plugin install hyperframes @ hyperframes; other clients use npx hyperframes skills update to load the core skill set, and then directly in the conversation say "use/hyperframes to make a 10-second product title, the title fades in, the background video and the slight background music", it will finish planning and rendering by itself.

Be careful not to overload: the interactive selector only needs to check Core Skills, and the missing authoring workflow will be automatically loaded when it is used; in scripted or unattended environments, the npx skills add without parameters will be fully loaded with 21 skills.

One last reminder: CPU-eating local rendering, long video or bulk tasks It is recommended to use the official cloud render or AWS Lambda solution instead of carrying it on your laptop.