hyperframes-core

Create a root div with data-composition-id, data-width, data-height, and data-duration, add timed clips with data-start, data-duration, and data-track-index, then register one paused GSAP timeline on window.__timelines keyed by the composition id. Validate with npx hyperframes check.

A standalone composition is a top-level index.html whose root sits directly in body with no template wrapper. A sub-composition is loaded via data-composition-src and its root must be wrapped in a template element, since the runtime only clones template contents.

Common causes are video or audio elements nested inside a sub-composition template instead of being direct children of the host root, duplicate media ids across files, or a full-screen background set on the composition root instead of a full-bleed child element.

No. The renderer seeks frames by time, so render-time clocks, unseeded Math.random, network fetches, input state, and infinite repeats are banned. Use a seeded PRNG and finite repeat counts computed with Math.floor.

Yes, Tailwind v4 projects are supported via init --tailwind, and CSS, WAAPI, Lottie, and Three.js runtimes work through adapters. Three.js cannot auto-infer duration, so a root data-duration is required for it.