Agent skill · design visual · aiskillstore
hyperframes-animation
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
Why this skill is useful
Adds comprehensive animation techniques and runtime-specific APIs for HyperFrames that extend the AI's capabilities in motion design.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
HyperFrames Animation All motion knowledge in one skill: rules (atomic recipes), blueprints (multi-phase scene templates), transitions (scene-to-scene), techniques (broader motion-design patterns), and adapters (per-runtime APIs). For the composition contract (data attributes, sub-compositions, determinism) see hyperframes-core. Default: compose atomic rules Pick 2-4 rules from rules-index.md, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint. Load a blueprint when The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time You want runnable ground-truth code for a complex 4-5 phase choreography Blueprints live in blueprints-index.md. Each entry points to blueprints/<id>.md (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration. Routing Want to… Read ------------------------------------------------------------------------------ --------------------------------------------------- Pick an atomic motion pattern by trigger / tag rules-index.md Read one rule's full HTML / CSS / GSAP recipe rules/<name>.md Pick a multi-phase scene template blueprints-index.md Read one blueprint's full recipe blueprints/<id>.md Author a scene transition (CSS-driven, between two clips) transitions/overview.md, transitions/catalog.md Look up a broader motion-design technique techniques.md Analyze an existing composition's animation map scripts/animation-map.mjs GSAP API — timeline / tweens / position parameters adapters/gsap.md GSAP — drop-in effect recipes rules/gsap-effects.md GSAP — transforms / perf adapters/gsap-transforms-and-perf.md GSAP — eases / stagger adapters/gsap-easing-and-stagger.md GSAP — timeline / labels adapters/gsap-timeline-and-labels.md Lottie / dotLottie (After Effects exports, window.hfLottie) adapters/lottie.md Three.js / WebGL (3D scenes, …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/hyperframes-animation