Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When an Agent or user needs any motion/animation in a HyperFrames composition — atomic motion, scene blueprint, transition, or runtime-specific API (GSAP/Lottie/Three.js etc.). Also when auditing an existing composition's choreography.
animation-map.mjs to sample timelines and output JSON for audit.Deterministic, seek-safe animation code or an animation-map audit that reveals dead zones and lifecycle warnings — ready for render.
Use Cases
A designer building a product launch video needs a brand-reveal scene. They use hyperframes-animation to load the logo-assemble-lockup blueprint, glue GSAP rules, and respect core constraints. The skill outputs runnable HTML/CSS/GSAP code on a single paused timeline. Value: saves hours of motion design and ensures deterministic render without frame drift.
After authoring a complex 5-phase composition, an editor runs animation-map.mjs from the skill to audit choreography. The script samples all GSAP timelines, computes bounding boxes, and flags dead zones and stagger issues. Value: catches lifecycle warnings before render, reducing re-render cost and improving motion quality.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File