shared note
\n \n \n \n
\n
\n

Hello, HyperFrames

\n

HTML in, MP4 out

\n
\n
\n

Write HTML. Render video.

\n
\n
\n
\n \n \n\n```\n\nRead it like this:\n\n- `#root` is the composition: 1920×1080, 6 s, id `main`.\n- `#intro` plays 0–3 s. `#outro` has `data-start=\"intro\"`, so it starts when `#intro` ends (3 s).\n- The timeline positions (`0`, `0.4`, `2.6`, `3`, `3.3`) are seconds on the root timeline.\n- `data-var-text=\"headline\"` and `var(--accent)` bind the two variables.\n\n**Step 3. Preview, check, render.**\n\n```bash\nnpx hyperframes preview # Studio + live reload\nnpx hyperframes lint # static contract\nnpx hyperframes check # browser: runtime, layout, motion, WCAG contrast\nnpx hyperframes snapshot --at 0,0.7,3.5,5.9 # still frames to eyeball\nnpx hyperframes render --quality draft --output hello.mp4\n```\n\nWhat we saw: `check` passed (0 runtime errors, 0 layout issues, 5/5 contrast checks). `lint` gave 2 **warnings**, `nested_structure_needs_subcomposition`. That is the linter nudging you to move each multi-element scene into its own file (section 7.2). It does not block the render.\n\n**Step 4. Render a variant without touching the HTML.**\n\n```bash\nnpx hyperframes render \\\n --variables '{\"headline\":\"Hi there\",\"accent\":\"#f97316\"}' \\\n --strict-variables --quality draft --output variant.mp4\n```\n\n## 7. Practical examples\n\n### 7.1 Batch: one MP4 per data row\n\n```json\n[\n { \"name\": \"acme\", \"headline\": \"Acme Pro\" },\n { \"name\": \"northstar\", \"headline\": \"Northstar Pro\" }\n]\n```\n\n```bash\nnpx hyperframes render --batch rows.json --strict-variables --output \"renders/{name}.mp4\"\n```\n\nStart with the default concurrency. Raise `--batch-concurrency` only after one render is stable. Variables cannot change the viewport, root duration, fps, or output format.\n\n### 7.2 Split scenes into reusable sub-compositions (verified)\n\n`compositions/title-card.html`:\n\n```html\n\n```\n\nMount it twice in `index.html` with different values:\n\n```html\n
\n
\n
\n
\n\n```\n\nLessons from running it:\n\n- In a `