What problem does it solve? Authoring motion for HyperFrames video compositions requires knowing which animation pattern fits a scene, which runtime API to call, and how to keep everything seek-safe and deterministic. This Skill consolidates all animation knowledge — atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters — into one routable reference so agents pick the right recipe instead of inventing choreography from scratch. ## Core Features & Use Cases - Atomic motion rules: 25+ composable GSAP recipes (kinetic typography, counters, camera moves, 3D transforms, SVG drawing, springs, ripples) indexed by tag and trigger in rules-index.md. - Scene blueprints: 15 time-coded shot templates (kinetic-type-beats, cursor-ui-demo, logo-assemble-lockup, etc.) mapped to storyboard roles like Hook, Problem, Key_Feature, and CTA. - Runtime adapters: API references for GSAP (default), Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU/WebGPU, all registered for deterministic frame-by-frame seeking. - Transition registry: Machine-readable JSON of Tier-B scene transitions (crossfade, blur-crossfade, push-slide, zoom-through, squeeze) stamped by a deterministic injector. - Use Case: When building a product-launch video scene, read the blueprint for the frame's role, compose 2-4 atomic rules on a single paused GSAP timeline, then audit the result with the animation-map script. ## Quick Start Ask the agent to animate a HyperFrames scene by picking rules from rules-index.md and composing them on a single paused GSAP timeline registered under the scene's data-composition-id.
