HTML to video: a practical workflow for 2026

What an HTML to video converter actually does

A browser can display text, shapes, and timed visual changes; a video stores a sequence of frames that plays independently of that browser page. HyperFrames provides the rendering engine used by this CLI. Its frame capture model advances the composition through time and records the resulting visual state. Fonts, browser versions, and the rendering environment still affect the final pixels, so keep those dependencies consistent when comparing revisions.

Claude Motion Skills builds its supported compositions from project JSON and implemented templates. The cm-skills render command regenerates the HTML from that project. It does not import an arbitrary website URL or execute a custom HTML file supplied by the user. If you already have a web page, use its verified content as source material and build a scene draft from it. This distinction tells you whether the workflow fits your task before you install anything.

Documentation: HyperFrames: how the rendering engine captures frames · Claude Motion Skills: published CLI workflow and supported outputs

Choose a message that benefits from motion

A short product explanation, a research takeaway, or a sequence of three practical tips is a useful first project. Write the single idea the viewer should remember, then separate the supporting material into scenes. Give each scene a concise headline and one body paragraph. Keep evidence, qualifications, and measurement units attached to the claims they support; motion should make the explanation easier to follow.

For example, a fictional tutorial about planning a weekly review might use three scenes: collect unfinished tasks, choose next week's priorities, and reserve time for the hardest task. That is an illustrative outline, not a customer result. Use Kinetic Type when the words carry the story. Choose Quiet Keynote for a calmer explanation, or Paper Collage for an editorial tone. Compare the actual template previews before choosing.

• Explore the Kinetic Type template
• Compare motion graphics examples

Prepare the local tools and account

The CLI requires Node.js 22 or newer. Local rendering also uses Chrome and FFmpeg; ffprobe helps inspect the output. Use your own Claude Code or Codex session to organize source material and write the draft. Your assistant access is separate from the Claude Motion Skills account. The setup command connects that account through a browser code and installs the local skill for the selected assistant.

Run doctor before composing to inspect your local tools and account status. New composition requires an active Creator or Studio subscription. Check the pricing page for the current subscription and checkout status before relying on that step. Existing downloaded projects can still be previewed and rendered without an active subscription. The commands below show the supported flow; they do not imply that checkout or paid audio is available to every visitor today.

cm-skills doctor
cm-skills setup --agent both
cm-skills styles --mode motion --json

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

• Install and connect the CLI
• Check plans and availability

Turn the outline into an editable composition

Ask your assistant to create a UTF-8 draft.json with a title, mode, styleId, format, source script, and an explicit scenes array. Each scene has an ID, title, body, narration, and duration. Use mode motion and a style ID returned by the styles command. The source script should faithfully reflect the original material; narration can explain details that would make the visible slide too crowded.

Choose 16:9 for a landscape explanation or 9:16 for a vertical short. This choice changes available reading space, so decide before polishing the copy. Supported motion scenes last between one and fifteen seconds, and a project can contain one to forty scenes. Start with a few scenes and evaluate the rhythm. The compose command creates index.html, project.json, and narration.md in a new output directory.

cm-skills compose --input draft.json --out weekly-review
cm-skills preview --project weekly-review --port 4173

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

• Write a clear scene prompt

Review the HTML at the intended viewing size

Open the loopback address printed by preview. Read every scene at a realistic viewing size, including a narrow phone window for vertical work. A headline that looks elegant on a desktop can become a wall of text on a phone. Check long words, line breaks, numbers, and the final frame. Allow enough time to understand the message after the entrance animation has settled.

Revise project.json or ask the assistant for a corrected draft in a new output folder. Preview and render rebuild from validated project data, so keep changes in that source of truth. Changing only the generated HTML can be lost on regeneration. Preserve an approved project copy before experimenting, and use a descriptive revision name so the preview and final export belong to the same version.

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

Render an MP4 and check the delivered file

Render the approved project to a new MP4 filename. The CLI uses pinned HyperFrames 0.8.145 with your local tools; the first run may need to download the engine through npm. Rendering duration depends on the composition and computer. Keep the terminal output so a failed export can be diagnosed from an actual error rather than repeated guesses.

Play the resulting MP4 from beginning to end. Confirm the orientation, text visibility, scene order, and ending. Inspect any attached audio as part of this review. A successful HTML preview is one checkpoint; the exported file needs its own inspection. Deliver the MP4 for playback and retain the project directory for later changes. A public HTML share is a separate, silent visual presentation and does not upload the local audio tracks.

cm-skills render --project weekly-review --out weekly-review-final.mp4 --fps 30
ffprobe -v error -show_streams -show_format weekly-review-final.mp4

Documentation: Claude Motion Skills: published CLI workflow and supported outputs

• Plan a social video export
• Build a presentation instead