Defines the composition contract for building renderable HyperFrames HTML video projects.
npx skills add https://github.com/noemdb/cfla --skill hyperframes-core-noemdb
Please help me install this Agent Skill. Skill: hyperframes-core Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/hyperframes-core Command: npx skills add https://github.com/noemdb/cfla --skill hyperframes-core-noemdb
data-* timing attributes, class="clip" visibility rules, tracks, and the single paused GSAP timeline registered on window.__timelines. - Determinism & Layout Rules: Enforces seekable, reproducible frames by banning render-time clocks, unseeded randomness, infinite repeats, and non-allowlisted animated properties. - Planning Formats & Validation: Documents STORYBOARD.md, BRIEF.md, and SCRIPT.md plan formats plus the npx hyperframes check / snapshot / render validation loop. - Use Case: When asked to build a 30-second product video as HTML, use this Skill to structure index.html with timed clips, sub-compositions per scene, and a registered timeline that passes lint and renders deterministically. ## Quick Start Read this skill before writing any composition HTML, then scaffold a minimal composition with a sized root, one clip, and a paused GSAP timeline registered under the composition id.High-intent search queries and answers about installing and using this skill.
Create a root div with data-composition-id, data-start="0", data-width, data-height, and data-duration, add timed children with class="clip" plus data-start, data-duration, and data-track-index, then register one paused GSAP timeline at window.__timelines keyed by the composition id.
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 must wrap its root in a template element, since the runtime only clones template contents.
Common causes include painting a full-screen background on the composition root instead of a full-bleed child, duplicate element ids across the assembled page, or an unsized root collapsing to zero height. Run npx hyperframes snapshot at scene midpoints to inspect frames.
No. The renderer seeks frames by time, so render-time clocks, unseeded Math.random, network fetches, input state, and infinite repeats are banned. All visual state must be a deterministic function of timeline time using a paused GSAP timeline.
It is required for Three.js compositions, infinite CSS or WAAPI animations, and compositions with no GSAP timeline or animation signal. It is optional when duration can be inferred from a registered GSAP timeline, finite CSS or WAAPI animations, or Lottie.
soferClarify user intent through a structured interview and generate a YAML manifest.
vibe-motionManage HyperFrames project scaffolding, validation, preview, rendering, and cloud deployment workflows.
chmonitorCompose deterministic GSAP timelines from atomic motion rules and scene blueprints.
kofiarhinCreate timed HTML video compositions with GSAP animations and WCAG contrast validation.