hyperframes-animation

---
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, demo-page-scroll-spotlight, 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) and `examples/<id>.html` (runnable sample). 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` + `examples/<id>.html`         |
| 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

```bash
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.

## See Also

- `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract
- `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction)
- `hyperframes-cli` — `npx hyperframes lint / validate / inspect / preview / render`

• SKILL.md 7 KB
• blueprints-index.md 12 KB
• rules-index.md 11 KB
• techniques.md 15 KB
• adapters/animate-text.md 4 KB
• adapters/animejs.md 3 KB
• adapters/css-animations.md 4 KB
• adapters/gsap-easing-and-stagger.md 6 KB
• adapters/gsap-timeline-and-labels.md 4 KB
• adapters/gsap-transforms-and-perf.md 4 KB
• adapters/gsap.md 7 KB
• adapters/html-in-canvas-patterns.md 17 KB
• adapters/lottie.md 3 KB
• adapters/three.md 4 KB
• adapters/typegpu.md 7 KB
• adapters/waapi.md 3 KB
• blueprints/brand-reveal-assemble-zoom.md 15 KB
• blueprints/comparison-split-cards.md 15 KB
• blueprints/concept-demo-decode-pan.md 17 KB
• blueprints/cta-morph-press.md 16 KB
• blueprints/cta-orbit-collapse.md 18 KB
• blueprints/demo-page-scroll-spotlight.md 17 KB
• blueprints/hook-counter-burst.md 15 KB
• blueprints/messaging-multi-phrase.md 15 KB
• blueprints/metric-video-text-pivot.md 19 KB
• blueprints/problem-mockup-overwhelm.md 17 KB
• blueprints/proof-logo-chain.md 17 KB
• blueprints/takeover-ticker-displace.md 15 KB
• blueprints/workflow-approve-press.md 16 KB
• examples/brand-reveal-assemble-zoom.html 12 KB
• examples/comparison-split-cards.html 21 KB
• examples/concept-demo-decode-pan.html 18 KB
• examples/cta-morph-press.html 15 KB
• examples/cta-orbit-collapse.html 49 KB
• examples/demo-page-scroll-spotlight.html 24 KB
• examples/hook-counter-burst.html 22 KB
• examples/messaging-multi-phrase.html 12 KB
• examples/metric-video-text-pivot.html 25 KB
• examples/problem-mockup-overwhelm.html 43 KB
• examples/proof-logo-chain.html 28 KB
• examples/takeover-ticker-displace.html 11 KB
• examples/workflow-approve-press.html 20 KB
• rules/3d-page-scroll.md 9 KB
• rules/3d-text-depth-layers.md 11 KB
• rules/ai-tracking-box.md 15 KB
• rules/asr-keyword-glow.md 12 KB
• rules/avatar-cloud-network.md 14 KB
• rules/camera-cursor-tracking.md 12 KB
• rules/card-morph-anchor.md 12 KB
• rules/center-outward-expansion.md 8 KB
• rules/context-sensitive-cursor.md 11 KB
• rules/coordinate-target-zoom.md 15 KB
• rules/counting-dynamic-scale.md 9 KB
• rules/css-marker-patterns.md 8 KB
• rules/cursor-click-ripple.md 11 KB
• rules/discrete-text-sequence.md 10 KB
• rules/dynamic-content-sequencing.md 12 KB
• rules/gsap-effects.md 9 KB
• rules/hacker-flip-3d.md 10 KB
• rules/kinetic-beat-slam.md 8 KB
• rules/multi-phase-camera.md 10 KB
• rules/orbit-3d-entry.md 13 KB
• rules/physics-press-reaction.md 12 KB
• rules/press-release-spring.md 12 KB
• rules/reactive-displacement.md 11 KB
• rules/scale-swap-transition.md 11 KB
• rules/sine-wave-loop.md 12 KB
• rules/split-tilt-cards.md 11 KB
• rules/stat-bars-and-fills.md 6 KB
• rules/svg-icon-enrichment.md 12 KB
• rules/svg-path-draw.md 10 KB
• rules/vertical-spring-ticker.md 10 KB
• rules/viewport-change.md 14 KB
• scripts/animation-map.mjs 19 KB
• scripts/package-loader.mjs 8 KB
• transitions/TRANSITION-REGISTRY.md 8 KB
• transitions/catalog.md 7 KB
• transitions/css-3d.md 1 KB
• transitions/css-blur.md 2 KB
• transitions/css-cover.md 1 KB
• transitions/css-destruction.md 4 KB
• transitions/css-dissolve.md 2 KB
• transitions/css-distortion.md 2 KB
• transitions/css-grid.md 1 KB
• transitions/css-light.md 2 KB
• transitions/css-mechanical.md 2 KB
• transitions/css-other.md 1 KB
• transitions/css-push.md 1 KB
• transitions/css-radial.md 1 KB
• transitions/css-scale.md 1 KB
• transitions/overview.md 14 KB