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.
See Also
hyperframes-core — composition structure, data attributes, sub-compositions, deterministic render contracthyperframes-creative — palettes, typography, narration, beat planning (non-animation creative direction)hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render
1---2name: hyperframes-animation3description: 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.4---5
6# HyperFrames Animation
7
8All 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).
9
10For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`.
11
12## Default: compose atomic rules
13
14Pick 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.
15
16## Load a blueprint when
17
18- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
19- You want runnable ground-truth code for a complex 4-5 phase choreography
20
21Blueprints 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.
22
23## Routing
24
25| Want to… | Read |
26| ------------------------------------------------------------------------------ | --------------------------------------------------- |
27| Pick an atomic motion pattern by trigger / tag | `rules-index.md` |
28| Read one rule's full HTML / CSS / GSAP recipe | `rules/<name>.md` |
29| Pick a multi-phase scene template | `blueprints-index.md` |
30| Read one blueprint's full recipe | `blueprints/<id>.md` |
31| Author a scene transition (CSS-driven, between two clips) | `transitions/overview.md`, `transitions/catalog.md` |
32| Look up a broader motion-design technique | `techniques.md` |
33| Analyze an existing composition's animation map | `scripts/animation-map.mjs` |
34| GSAP API — timeline / tweens / position parameters | `adapters/gsap.md` |
35| GSAP — drop-in effect recipes | `rules/gsap-effects.md` |
36| GSAP — transforms / perf | `adapters/gsap-transforms-and-perf.md` |
37| GSAP — eases / stagger | `adapters/gsap-easing-and-stagger.md` |
38| GSAP — timeline / labels | `adapters/gsap-timeline-and-labels.md` |
39| Lottie / dotLottie (After Effects exports, `window.__hfLottie`) | `adapters/lottie.md` |
40| Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`) | `adapters/three.md` |
41| Anime.js (`window.__hfAnime`) | `adapters/animejs.md` |
42| CSS keyframes (`animation-delay` / `play-state` / `fill-mode`) | `adapters/css-animations.md` |
43| Web Animations API (`element.animate()`, `currentTime` seek) | `adapters/waapi.md` |
44| TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines) | `adapters/typegpu.md` |
45| HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md` |
46| Named text-animation effects (24 IDs via external `animate-text` skill) | `adapters/animate-text.md` |
47
48## Picking a runtime
49
50- **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based.
51- **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports).
52- **Three.js** for 3D scenes, camera motion, shader-driven visuals.
53- **Anime.js** for lightweight tweening when GSAP is overkill.
54- **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost.
55- **WAAPI** for native browser keyframes without a GSAP dependency.
56- **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders).
57
58Multiple 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.
59
60## Critical Constraints
61
62**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.
63
64Animation-craft additions on top of core's contract:
65
66- **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.
67- **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.
68
69## Scripts
70
71```bash
72node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
73 --out <composition-dir>/.hyperframes/anim-map
74```
75
76Reads 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.
77
78## See Also
79
80- `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract
81- `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction)
82- `hyperframes-cli` — `npx hyperframes lint / validate / inspect / preview / render`
gabrielmoreira