HyperFrames Guide: Create HTML-Based Videos and Export to MP4

HyperFrames turns HTML and CSS scenes into MP4 video files. You design scenes like web pages, preview them in a browser, and render the final video using a command. You can also work with an AI coding assistant such as Claude Code, but local rendering still requires a properly configured environment.

🎬 Key takeaways

• Build titles, captions, images, and motion with HTML and CSS.

• Local rendering requires Node.js 22 or newer and FFmpeg.

• Start a project with npx hyperframes init my-video.

• Preview using npx hyperframes preview, then export with npx hyperframes render --output output.mp4.

💻 How does HTML become a video?

Unlike a conventional drag-and-drop editor, HyperFrames describes video scenes through HTML elements and timing attributes. CSS and compatible animation libraries such as GSAP can control movement. The renderer captures individual frames, then FFmpeg encodes them into an MP4 file.

For example, a travel introduction can reveal a city name over a photograph, then display a short tip a moment later. You control the layout and timing in the composition rather than manually positioning every clip on a traditional timeline.

🛠️ Install the tools and create a project

Check that Node.js 22 or later and FFmpeg are available. Run node -v and ffmpeg -version in your terminal. Once both are installed, create a project and move into its folder:

npx hyperframes init my-video
cd my-video

A project can contain index.html as its main composition, along with an assets directory for images, footage, and sound. Edit the HTML to change the scene, dimensions, and timing.

🧩 Build your first HTML scene

The main composition uses attributes such as data-composition-id, data-width, and data-height. Timed elements use properties including data-start, data-duration, and data-track-index. These tell HyperFrames when each element appears and how it fits into the composition.

Start with a simple title and background before adding motion, sound, or multiple scenes. A minimal test project makes it easier to spot mistakes in element timing or asset paths.

👀 Preview before exporting

npx hyperframes preview

The preview opens your composition in a browser. Review text placement, scene transitions, image cropping, and caption timing. For vertical social videos, pay particular attention to aspect ratio and whether the text stays readable on a phone.

📤 Export the finished MP4

npx hyperframes render --output output.mp4

Run this command from your project folder. HyperFrames captures the video frames and uses FFmpeg to encode the output file. Open the finished MP4 and check that the timing, visuals, and audio work as intended.

AI assistants can help generate and edit the HTML, but they do not replace the final review. Begin by running node -v and ffmpeg -version to confirm that your computer is ready for the first project.