Update to Visual Sandbox

{
  "description": "Write HTML and render it into a video or a picture with the Visual Sandbox MCP tools render_html_video and render_html_image: motion graphics, kinetic type, an animated explainer, a title card, lower thirds, a logo sting, a social card, a quote card or a thumbnail with exact text. Trigger when the person asks for \"motion graphics\", \"kinetic typography\", \"an animated explainer\", \"a title card\", \"an intro\", \"a lower third\", \"a logo animation\", \"a social card with this text\" or a design that must move. Covers the composition contract, the render clock, GSAP timelines, sound, the limits, and how to check a render. Free. Uses the MCP tools only.\n",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 280
    }
  ],
  "name": "vsb-html-video",
  "skill_md_contents": "---\nname: vsb-html-video\ndescription: >\n  Write HTML and render it into a video or a picture with the Visual Sandbox\n  MCP tools render_html_video and render_html_image: motion graphics, kinetic\n  type, an animated explainer, a title card, lower thirds, a logo sting, a\n  social card, a quote card or a thumbnail with exact text. Trigger when the\n  person asks for \"motion graphics\", \"kinetic typography\", \"an animated\n  explainer\", \"a title card\", \"an intro\", \"a lower third\", \"a logo\n  animation\", \"a social card with this text\" or a design that must move.\n  Covers the composition contract, the render clock, GSAP timelines, sound,\n  the limits, and how to check a render. Free. Uses the MCP tools only.\nlicense: Proprietary. See LICENSE for the terms.\n---\n\n# HTML to video\n\nYou write one HTML document. The renderer plays it in headless Chromium on a\nclock that it moves frame by frame, so every frame is drawn at an exact time\nand the same HTML always gives the same video. Both tools are free.\n\nUse this pack only when the person asks for designed motion or exact text.\nFor filmed footage, a person or a real place, use a video model instead\n([`vsb-video`](../vsb-video/SKILL.md)).\n\n## The two tools\n\n| Tool | Gives | Inputs |\n|------|-------|--------|\n| `render_html_video` | An MP4 | `html`, `width`, `height` (even, 16 to 1920), `duration` (up to 60 s), `fps` (24, 30 or 60) |\n| `render_html_image` | A PNG | `html`, `width`, `height`, `time` (the moment to draw), `transparent` |\n\nEach returns a job id. Call `show_media` with it, or `get_job` when it is\ndone. The result's `metrics.warnings` lists blocked requests and script\nerrors. Read them before you report the result.\n\n## The composition contract\n\n1. Set a fixed pixel size on `html` and `body`, the same as `width` and\n   `height`. Use `overflow: hidden`.\n2. Make every frame a function of the time alone. The renderer replaces\n   `Date`, `performance.now`, `requestAnimationFrame`, `setTimeout` and\n   `setInterval` with its own clock, and seeds `Math.random`. Do not read\n   the real time in any other way.\n3. Animate with one of these. All of them follow the render clock:\n   - CSS animations and transitions.\n   - The Web Animations API (`element.animate`).\n   - A GSAP timeline, created paused and registered after the setup:\n     `window.__timelines = { main: tl }`. The renderer seeks it to each\n     frame's time.\n   - `requestAnimationFrame`, with the time from its argument.\n4. Never use an infinite loop that does not depend on the time, such as a\n   `while` loop that waits for a load.\n5. Load fonts, pictures, footage and libraries from public `https` URLs.\n   A private, local or link-local address is blocked, and the block shows in\n   the warnings.\n6. Put footage in `<video muted playsinline src=\"…\" data-start=\"2\">`. The\n   renderer seeks it to the frame's time minus `data-start`.\n7. Add sound with `<audio src=\"…\" data-start=\"0\" data-duration=\"8\"\n   data-volume=\"0.8\">`. Up to 8 tracks of up to 50 MB each. The renderer mixes\n   them after the frames. A narration from `audio_elevenlabs_tts` works here.\n\n## A skeleton\n\n```html\n<!doctype html>\n<html><head><meta charset=\"utf-8\">\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap\" rel=\"stylesheet\">\n<style>\n  html, body { margin: 0; width: 1080px; height: 1920px; overflow: hidden; background: #0B0B0F; }\n  h1 { font: 800 140px/1 Inter, sans-serif; color: #fff; position: absolute; top: 760px; left: 80px; }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js\"></script>\n</head><body>\n<h1 id=\"title\">Launch day</h1>\n<audio src=\"https://cdn.visualsandbox.com/…/voice.mp3\" data-start=\"0.5\"></audio>\n<script>\n  const tl = gsap.timeline({ paused: true });\n  tl.from(\"#title\", { y: 120, opacity: 0, duration: 0.8, ease: \"power3.out\" })\n    .to(\"#title\", { scale: 1.06, duration: 3 }, 0.8);\n  window.__timelines = { main: tl };\n</script>\n</body></html>\n```\n\n## How to work\n\n1. Agree the size, the length and the words with the person. Keep one idea\n   for each scene, and 2 to 4 seconds for each scene.\n2. Read the brand with `get_theme` when the work is for a brand. Use its\n   colors and fonts in the CSS, and its logo URL in an `<img>`.\n3. Render one still first with `render_html_image` at the busiest moment\n   (`time`). It is fast. Fix the layout before the video.\n4. Render the video. 30 fps for graphics, 24 for a film look.\n5. Look at the result before you report it: `get_job` returns four frames of\n   the video.\n\n## Limits\n\n- Up to 60 seconds, 16 to 1920 pixels on each side, 2 MB of HTML.\n- Up to 50 video renders and 200 picture renders a day for each account.\n- A render stops after 8 minutes. Long footage or many heavy effects take\n  longer to render.\n\n## Rules\n\n- Write the text the person gave, word for word. Check the spelling.\n- Never put a password, a key or private data in the HTML. The renderer has\n  no secrets, but the HTML is kept with the job.\n- A failed render costs nothing. Read the error and the warnings, fix the\n  HTML, and render again.\n"
}