hyperframes-animation

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.