Skill

Pass

Audit score 90

hyperframes-animation

heygen-com/hyperframes

Atomic motion rules, blueprints, and seven runtime adapters for HyperFrames animation composition.

What is hyperframes-animation?

Comprehensive animation knowledge for HyperFrames covering atomic motion rules, multi-phase scene blueprints, transitions, and runtime-specific APIs (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU). Use this skill to compose animations by picking 2–4 rules, load pre-designed blueprints, audit existing choreography, or look up runtime-specific documentation.

Compose animations from 2–4 atomic motion rules with a single paused GSAP timeline
Load multi-phase scene blueprints for brand reveals, social proof, and other templated sequences
Author scene transitions between clips using CSS-driven patterns
Look up runtime-specific APIs and drop-in effect recipes for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU
Audit existing compositions' animation maps and choreography using the animation-map script
Apply 24 named text-animation effects via the animate-text skill integration

How to install hyperframes-animation

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

Prerequisites

hyperframes-core skill (for composition contract, single paused timeline, and determinism rules)
Node.js (for animation-map auditing script)

Claude Code

Cursor

Windsurf

Cline

How to use hyperframes-animation

1.Review rules-index.md to find atomic motion patterns matching your trigger or tag
2.Select 2–4 rules and read their full recipes in rules/<name>.md
3.Compose them into a single paused GSAP timeline using the provided HTML/CSS/GSAP code
4.For complex multi-phase scenes, check blueprints-index.md and load the matching blueprint from blueprints/<id>.md
5.For scene transitions, consult transitions/overview.md and transitions/catalog.md
6.Look up runtime-specific APIs in adapters/<runtime>.md (e.g., adapters/gsap.md for easing and stagger)
7.After authoring, run animation-map.mjs to audit choreography and identify issues

Use cases

Good for

Quickly compose a motion sequence by selecting atomic rules and combining them on a single timeline
Reuse a pre-designed multi-phase template (e.g., brand reveal) to save authoring time on complex choreography
Integrate character animation from Lottie/After Effects exports with gesture and walk-cycle support
Build 3D scene animations with Three.js camera motion and AnimationMixer
Audit a completed composition to identify dead zones, stagger inconsistencies, and lifecycle warnings

Who it's for

Motion designers building HyperFrames compositions
Frontend developers implementing complex choreography with multiple animation runtimes
Teams reusing pre-designed scene templates and blueprints
Developers auditing and optimizing existing animation code

hyperframes-animation FAQ

When should I use a blueprint instead of composing atomic rules?

Load a blueprint when your scene matches an existing pre-designed template (e.g., brand reveal, social proof) and reusing its multi-phase pipeline saves real authoring time. Otherwise, composing 2–4 atomic rules is faster and produces less code.

Can I use multiple animation runtimes in one composition?

Yes. GSAP is the default for 95% of work, but Lottie, Three.js, Anime.js, CSS, WAAPI, and TypeGPU can coexist. Each registers instances on its runtime-specific global so HyperFrames can seek all of them in one pass.

What are the critical constraints for HyperFrames animation?

Use a single paused timeline, never derive positions from getBoundingClientRect() at tween time (pre-calculate layout constants), use only GSAP transform aliases (x, y, scale, rotation) for spatial motion, and follow hyperframes-core's non-negotiable rules (no Math.random, no repeat: -1, no timeline construction inside async/setTimeout).

How do I audit an existing composition's animation map?

Run `node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir>` to enumerate GSAP tweens, sample bboxes, and output animation-map.json. This identifies dead zones, stagger inconsistencies, and lifecycle warnings.

Which runtime should I pick for character animation?

Use Lottie for pre-baked character animations from After Effects exports, including walk cycles, gestures, and reactions. For custom jointed puppets or real-time control, combine Lottie with GSAP orchestration.

Full instructions (SKILL.md)

Source of truth, from heygen-com/hyperframes.

name: hyperframes-animation description: "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."

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.

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`
Motion blur — shutter smear on an element, and when not to use it	`references/motion-blur.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`
Character animation (walk cycle, mascot, jointed puppet, gestures)	`adapters/lottie.md` → Characters
Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`)	`adapters/three.md`
Anime.js (`window.__hfAnime`)	`adapters/animejs.md`
CSS keyframes (`animation-delay` / `play-state` / `fill-mode`)	`adapters/css-animations.md`
Web Animations API (`element.animate()`, `currentTime` seek)	`adapters/waapi.md`
TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines)	`adapters/typegpu.md`
HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`)	`adapters/html-in-canvas-patterns.md`
Named text-animation effects (24 IDs via external `animate-text` skill)	`adapters/animate-text.md`

Picking a runtime

GSAP is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
Lottie when an asset has its own pre-baked timeline (typically After Effects exports), including characters that walk, gesture or react.
Three.js for 3D scenes, camera motion, shader-driven visuals.
Anime.js for lightweight tweening when GSAP is overkill.
CSS for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.
WAAPI for native browser keyframes without a GSAP dependency.
TypeGPU / WebGPU for GPU-rendered canvases (particles, liquid glass, custom shaders).

Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.

Critical Constraints

Prerequisite: hyperframes-core → Non-Negotiable Rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1, no page-load gsap.set on later-scene clips, no display or raw visibility tweens, and no timeline construction inside async / setTimeout / Promise). GSAP autoAlpha and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns .clip lifecycle. Don't restate the full contract here.

Animation-craft additions on top of core's contract:

Pre-calculated layout constants — never derive positions from getBoundingClientRect() at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.
Spatial motion uses GSAP transform aliases only (x, y, scale, rotation). Core's allowlist also permits opacity / color / backgroundColor / borderRadius for non-spatial property tweens — but never width / height / top / left for layout changes.

Scripts

node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
  --out <composition-dir>/.hyperframes/anim-map

Reads every GSAP timeline registered on window.__timelines, enumerates tweens, samples bboxes, computes flags, outputs animation-map.json. Use it to audit choreography (dead zones, stagger consistency, lifecycle warnings) after authoring.

animation-map.mjs resolves helper packages from the current project first, then can bootstrap the bundled HyperFrames package version. Set HYPERFRAMES_SKILL_PKG_VERSION=<version> only when running the skill outside the bundled CLI/skill install and you need to pin that bootstrap version explicitly.