hyperframes-animation

heygen-com/hyperframes

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

What is hyperframes-animation?

Comprehensive animation knowledge for HyperFrames compositions. Compose atomic motion rules with GSAP, load pre-designed multi-phase blueprints, handle scene transitions, and access runtime-specific APIs for Lottie, Three.js, Anime.js, CSS, Web Animations API, and TypeGPU. Use when building any motion or animation task within the HyperFrames ecosystem.

Compose 2-4 atomic motion rules into a single paused GSAP timeline
Load pre-designed multi-phase scene blueprints for complex choreography
Author scene transitions between clips with CSS-driven or timeline-based approaches
Access runtime-specific APIs: GSAP eases/stagger, Lottie player, Three.js mixer, Anime.js, CSS keyframes, Web Animations API, and TypeGPU/WebGPU
Analyze existing compositions with animation-map script to audit choreography and detect dead zones
Apply broader motion-design techniques and patterns beyond atomic rules

How to install hyperframes-animation

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

Prerequisites

hyperframes-core skill installed (required for composition structure and deterministic render contract)
Node.js for running animation-map audit script
Familiarity with GSAP timeline API (default runtime)

Claude Code

Cursor

Windsurf

Cline

How to use hyperframes-animation

1.Review rules-index.md to find 2-4 atomic motion patterns matching your trigger/tag needs
2.Read the full recipe in rules/<name>.md for HTML, CSS, and GSAP code
3.Compose rules into a single paused GSAP timeline on your composition element
4.Alternatively, check blueprints-index.md if your scene matches a pre-designed multi-phase template and load blueprints/<id>.md
5.For scene transitions, consult transitions/overview.md and transitions/catalog.md
6.Look up runtime-specific API docs (adapters/gsap.md, adapters/lottie.md, adapters/three.md, etc.) for your chosen runtime
7.Run animation-map.mjs script to audit choreography and detect issues before rendering

Use cases

Good for

Building a brand-reveal or social-proof scene using a pre-designed blueprint
Composing a sequence of entrance, emphasis, and exit animations with GSAP timeline orchestration
Implementing 3D camera motion and object animation in a WebGL scene with Three.js
Creating lightweight repeated motion effects (shimmer, decoration) with CSS keyframes
Auditing a complex multi-phase composition to identify stagger inconsistencies or lifecycle issues

Who it's for

Motion designers authoring HyperFrames compositions
Frontend developers building animated scenes with deterministic timelines
Creative technologists working with 3D or GPU-accelerated visuals
Teams reusing pre-built scene templates for consistent brand motion

hyperframes-animation FAQ

When should I use a blueprint vs. composing atomic rules?

Use a blueprint when your scene matches an existing pre-designed template (brand-reveal, social-proof, etc.) and reusing its multi-phase pipeline saves authoring time. Otherwise, pick 2-4 atomic rules and compose them—it's faster and produces less code.

What is the default runtime and when should I switch?

GSAP is the default for 95% of motion work. Use Lottie for pre-baked After Effects exports, Three.js for 3D scenes, Anime.js for lightweight tweening, CSS for simple repeated motifs, WAAPI for native keyframes, and TypeGPU/WebGPU for GPU-rendered canvases.

Can I use multiple runtimes in one composition?

Yes. Each runtime registers instances on its own global, and HyperFrames seeks all of them in one pass during timeline playback.

What are the critical animation constraints I must follow?

Single paused timeline, data-duration governs length, no Math.random/Date.now/performance.now, no repeat: -1, no gsap.set on later-scene clips, no display/visibility animation, no timeline construction inside async/setTimeout/Promise. Also: pre-calculate layout constants (never use getBoundingClientRect at tween time) and use GSAP transform aliases only (x, y, scale, rotation) for spatial motion.

How do I audit a complex composition for choreography issues?

Run the animation-map.mjs script pointing to your composition directory. It enumerates all GSAP tweens, samples bboxes, and outputs animation-map.json with flags for dead zones, stagger consistency, and lifecycle warnings.

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). HyperFrames-native: single paused timeline, seek-safe, deterministic."

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, `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).
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 gsap.set on later-scene clips, no display / visibility animation, no timeline construction inside async / setTimeout / Promise). Don't restate those 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.