What problem does it solve?
Creating professional, deterministic motion design for web-based video and interactive compositions requires deep expertise in animation libraries, timing, and seek-safe rendering patterns. This Skill eliminates the need to hand-code complex GSAP timelines from scratch by providing pre-built atomic motion rules, multi-phase scene blueprints, and runtime adapter references.
Core Features & Use Cases
- Atomic Motion Rules: Over 30 composable animation recipes covering text effects, camera moves, transitions, and SVG animations that combine into complete scenes with a single paused GSAP timeline.
- Scene Blueprints: Pre-designed multi-phase templates for common narrative arcs like brand reveals, social proof, concept demos, and CTAs—each with runnable HTML examples and phase timing guidance.
- Runtime Adapters: Integration patterns for seven animation runtimes including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU/WebGPU.
- Use Case: A motion designer building a product launch video can load the brand-reveal-assemble-zoom blueprint, select 2-4 rules, and output a seek-safe composition that renders deterministically at any frame.
Quick Start
Use the hyperframes-animation skill to build a brand reveal scene by selecting 2-4 atomic motion rules from the rules index and composing them into a single paused GSAP timeline registered to window.__timelines.
