mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
WaterrrForever
306a291dea
* fix(skills): audit descriptions — trim routing prose, fix stale facts, add missing triggers Descriptions are the always-loaded routing tier; this audit rebuilds them on one principle: discriminate by input shape, not pipeline internals. - Trim creation-workflow descriptions to positive trigger + nearest-neighbor disambiguation + /hyperframes escape hatch; full routing prose already lives in each skill body's route-confirm block and the router - Codify the workflow-vs-domain split as ownership (owns the end-to-end deliverable vs capability layer pulled in mid-flight) in /hyperframes, and widen "make me a video" framing to deck / composition port - Fix stale facts: embedded-captions identity count (desc 32, body 17 → actual 36 = 10 classic + 26 themed), six→ten visual languages, retired RVM/Standard wording in router details, figma shader transport (MCP → MCP source / native export), keyframes "cursor demos" (no backing content), hyperframes-media scripts/audio.mjs leak - Register missing capabilities: motion-graphics maps category (was in categories/ but absent from its own table, description, and router), asset-fusion + news triggers, slideshow page-to-deck + presenter mode, general-video editing, talking-head-recut 16:9/9:16/4:5 canvas, cli feedback + lambda sites, product demos, mood-brief BGM generation - website-to-video: relabel promo-shaped video types to keep the promo boundary with /product-launch-video; drop headless-Chrome wording - music-to-video: lyric timing via /hyperframes-media transcription or user-supplied lyrics, placed on the beat grid - Sync catalogs in lockstep (CLAUDE.md, AGENTS.md, README, docs/guides/skills.mdx, CLI project templates): add music-to-video + slideshow entries, complete the domain-skill lists, and extend the catalog-maintenance rule to cover AGENTS.md and the templates Validated with a 35-case description-only routing eval: 35/35 both before and after the rewrite (including new maps / asset-fusion / news probes). * fix(skills): post-media-v2 consistency — stale media ref, router figma wording, catalog rows - music-to-video: lyric transcription now routes to /media-use (the retired /hyperframes-media was still referenced) - router capability map: figma row gains the shaders fact (MCP source / native export), matching the SKILL.md source of truth - media-use catalog rows (CLAUDE.md, README, docs/guides/skills.mdx): add image models + captioning, aligning with the v2 description - catalog rule #1: root AGENTS.md carries the workflow list only (it has no domain-skill section) — rule wording now says so
85 lines
7.4 KiB
Markdown
85 lines
7.4 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). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. 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`
|