mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-09 03:16:38 +00:00
Miguel Ángel
060889f84c
* fix(skills): make hyperframes package version resolution non-fatal and overridable Global skill installs (e.g. ~/.claude/skills) have no hyperframes package.json in the loader's ancestor chain, so readBundledHyperframesVersion returns null and hyperframesPackageSpec threw. Because the spec is passed eagerly as an argument to importPackagesOrBootstrap, it threw even when @hyperframes/producer was already installed and no bootstrap was needed. Resolution order is now: HYPERFRAMES_SKILL_PKG_VERSION env override first, then the bundled/in-repo version, then a non-throwing @latest fallback that warns to stderr. @latest satisfies the pinned-spec guard so bootstrap still installs, and already-installed packages import fine; the eager argument is now harmless. In-repo resolution is unchanged (same pinned version). Applied to both package-loader.mjs copies (animation + creative) and documented the env var in animation-map.mjs and contrast-report.mjs usage. Adds a focused test covering override wins, in-repo pin, and unresolvable @latest fallback. * test(skills): cover creative package loader fallback
85 lines
7.3 KiB
Markdown
85 lines
7.3 KiB
Markdown
---
|
|
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
|
|
|
|
```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.
|
|
|
|
`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.
|
|
|
|
## 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`
|