# Creativeclaw Render HTML Video > Render a HyperFrames-backed HTML/CSS/JS composition to video with Creative Claw. Use only when the user explicitly asks for HTML-to-video, HyperFrames, code-driven motion, animated HTML, or explicitly chooses HTML rendering for overlays or title cards. - Skill: `creativeclawco/creativeclaw-render-html-video` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add creativeclawco/creativeclaw-render-html-video` - Raw SKILL.md: https://api.skillmd.com/api/skills/creativeclawco/creativeclaw-render-html-video/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: creativeclawco (https://skillmd.com/u/creativeclawco) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/creativeclawco/creativeclaw-render-html-video --- # Render HTML Video Read [shared execution guidance](references/workflow-basics.md) once per task before using tools. It covers existing authorization, model discovery, optional cost checks, imports, and recovery. `render_html_video` sends an HTML composition to a HyperFrames renderer and returns a queued video job. This is an explicit-only route. Do not select it for ordinary AI video generation, or merely because a video needs text; use `creativeclaw-generate-video` unless the user asks for HTML/HyperFrames/code-driven rendering or explicitly accepts that method. ## Good uses - Put precise, animated text, captions, lower thirds, labels, or calls to action over an existing video. - Make deterministic title cards, logo stings, charts, UI motion, intros, or outros. - Preserve exact copy, fonts, colors, logo placement, and timing that a generative video model may change. It is not the right tool for photorealistic scene invention, character motion, or cinematic generative footage. ## Workflow 1. Confirm that the user explicitly wants the HTML/HyperFrames route. Establish duration, even-numbered width and height, FPS, output format, exact copy, and source media. 2. Import local or attached media and use durable public HTTP(S) URLs in the HTML. For overlays, match the source video's aspect ratio and dimensions; scale or pad the source first when necessary. 3. For branded work, call `get_theme` and use its approved fonts, colors, logos, and motion character. 4. Author a deterministic HyperFrames composition. Prefer one fixed-size root with `data-composition-id`, `data-width`, `data-height`, and `data-duration`; use a single paused GSAP timeline registered as `window.__timelines[compositionId]` for advanced animation. Plain CSS keyframes also work for simple motion. 5. Call `render_html_video` with `html`, `duration`, `fps`, `width`, `height`, `format`, `name`, and `tags`. Rendering is asynchronous: resolve the returned job with `check_job` when the final URL is needed. 6. Inspect text fit, safe zones, animation timing, media sync, encoded dimensions, and audio before using the output in another edit. Use 24 FPS for a cinematic cadence, 30 FPS for normal graphics, and 60 FPS only when the extra smoothness justifies the cost. The renderer normalizes other positive values to 24, 30, or 60, so request one of those directly. ## Example: text over an existing video This pattern keeps media playback under HyperFrames control. Replace `SOURCE_URL`, dimensions, duration, copy, and theme values. Keep the video muted and add a separate `