What problem does it solve? Authoring seek-safe, deterministic web animations for HyperFrames compositions requires coordinating timelines, eases, staggers, and multiple runtimes without breaking the single-paused-timeline render contract. This Skill provides the complete motion knowledge base so agents can pick proven recipes instead of inventing choreography from scratch. ## Core Features & Use Cases - Atomic motion rules: 30+ composable GSAP recipes (kinetic type, camera flights, cursor choreography, particle bursts, SVG path drawing) that run on one paused, seek-safe timeline. - Scene blueprints and transitions: 22 time-coded shot templates mapped to storyboard roles (Hook, Problem, CTA, etc.) plus a scene-transition catalog for multi-clip videos. - Seven runtime adapters: API references for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU, with guidance on picking the right runtime per scene. - Choreography auditing: the animation-map.mjs script samples registered timelines and flags dead zones, stagger inconsistencies, and lifecycle warnings. - Use Case: Building a product-launch video scene where a prompt types into an input and a streaming answer appears — load the prompt-type-submit-generate blueprint, compose it from the discrete-text-sequence and agent-progress-theater rules, then audit the result with animation-map.mjs. ## Quick Start Ask the agent to animate a HyperFrames scene using this skill, for example: compose a kinetic-type hook scene with a spring-pop logo reveal on a single paused GSAP timeline.
