Migrate from HyperFrames

A HyperFrames project needs no rewrite. Kinetograph reads its index.html, the compositions it mounts and the scripts it loads, and renders them without a browser. You keep the HTML, the data-* attributes and the GSAP timelines. Only the command changes.

my-video is the project directory or its index.html. Install Kinetograph first. The CLI reference lists every command.

Move a projectCopy Anchor Link

1. Check the root element. The outermost data-composition-id element gives the size (data-width, data-height) and the length (data-duration). The rate is 30 fps. A page without these renders at 1920 x 1080 for one second, with a warning.
2. Run doctor. It lists what the engine can't draw, and the frames it happens on.
3. Look at it. strip draws twelve frames into one picture.
4. Render with --strict. It stops on the first frame with something unsupported.

The commands for steps 2 to 4 differ only in the entry. Your project keeps its own layout. Only the files the commands write go in out/.

npx kinetograph doctor src/index.ts
npx kinetograph strip src/index.ts -n 12
npx kinetograph render src/index.ts --comp <id> --strict

Downloads and the lock fileCopy Anchor Link

Before the first frame, Kinetograph downloads what the page loads from the web: CDN scripts, ES modules, data files, remote pictures, media and Google Fonts.

• Each file goes in a local cache and is pinned in kinetograph.lock.json beside the entry. Commit that file.
• render, still, doctor and studio do this step themselves. Run npx kinetograph fetch-deps my-video on its own in CI or to warm the cache.
• A host other than the default CDNs needs --allow-host.
• Add --offline to a render to make it read only the cache.

What carries overCopy Anchor Link

Everything a HyperFrames page uses is read as it is. That covers data-composition-src compositions, clips (data-start, data-duration, data-hidden), window.__timelines, <video> and <audio> with their data-* attributes, speed ramps, audio effect chains, colour grading, the 18 embedded font families, WebGPU shader blocks, import maps and ES modules. The details are in HyperFrames projects.

What to checkCopy Anchor Link

• Three.js is not drawn. A page that loads it is reported on every frame.
• A tween on GSAP's root clock renders, with a warning. This is a gsap.to that is not on a timeline. HyperFrames seeks only the timelines on window.__timelines, so put the tween on one of those to get the same picture in both.
• Fonts. Operating-system fonts are never read. CJK, Arabic, Devanagari and other scripts have no bundled font, so load one that has them.
• Variable fonts that set font-variation-settings per element can measure wider than in Chrome. A line fitted by measureText may then wrap.

The full list is in What works. An agent can do all of this with the kinetograph skill: see Use with agents.