hyperframes-animation
byheygen-com· 46 skills
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.
How to install hyperframes-animation?
heygen-com/hyperframes/hyperframes-animation
$npx -y skills add heygen-com/hyperframes --skill hyperframes-animationInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/hyperframes-animation"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | # HyperFrames Animation |
| 2 | |
| 3 | 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). |
| 4 | |
| 5 | For the composition contract (data attributes, sub-compositions, determinism) see `hyperframes-core`. |
| 6 | |
| 7 | ## Default: compose atomic rules |
| 8 | |
| 9 | 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. |
| 10 | |
| 11 | ## Load a blueprint when |
| 12 | |
| 13 | - The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time |
| 14 | - You want runnable ground-truth code for a complex 4-5 phase choreography |
| 15 | |
| 16 | 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. |
| 17 | |
| 18 | ## Routing |
| 19 | |
| 20 | | Want to… | Read | |
| 21 | | ------------------------------------------------------------------------------ | --------------------------------------------------- | |
| 22 | | Pick an atomic motion pattern by trigger / tag | `rules-index.md` | |
| 23 | | Read one rule's full HTML / CSS / GSAP recipe | `rules/<name>.md` | |
| 24 | | Pick a multi-phase scene template | `blueprints-index.md` | |
| 25 | | Read one blueprint's full recipe | `blueprints/<id>.md` | |
| 26 | | Author a scene transition (CSS-driven, between two clips) | `transitions/overview.md`, `transitions/catalog.md` | |
| 27 | | Look up a broader motion-design technique | `techniques.md` | |
| 28 | | Analyze an existing composition's animation map | `scripts/animation-map.mjs` | |
| 29 | | GSAP API — timeline / tweens / position parameters | `adapters/gsap.md` | |
| 30 | | GSAP — drop-in effect recipes | `rules/gsap-effects.md` | |
| 31 | | GSAP — transforms / perf | `adapters/gsap-transforms-and-perf.md` | |
| 32 | | GSAP — eases / stagger | `adapters/gsap-easing-and-stagger.md` | |
| 33 | | GSAP — timeline / labels | `adapters/gsap-timeline-and-labels.md` | |
| 34 | | Lottie / dotLottie (After Effects exports, `window.__hfLottie`) | `adapters/lottie.md` | |
| 35 | | Three.js / WebGL (3D scenes, `AnimationMixer`, `hf-seek`) | `adapters/three.md` | |
| 36 | | Anime.js (`window.__hfAnime`) | `adapters/animejs.md` | |
| 37 | | CSS keyframes (`animation-delay` / `play-state` / `fill-mode`) | `adapters/css-animations.md` | |
| 38 | | Web Animations API (`element.animate()`, `currentTime` seek) | `adapters/waapi.md` | |
| 39 | | TypeGPU / WebGPU (`navigator.gpu`, WGSL, compute pipelines) | `adapters/typegpu.md` | |
| 40 | | HTML-as-texture + WebGL/GLSL post-fx (capture live DOM via `drawElementImage`) | `adapters/html-in-canvas-patterns.md` | |
| 41 | | Named text-animation effects (24 IDs via external `animate-text` skill) | `adapters/animate-text.md` | |
| 42 | |
| 43 | ## Picking a runtime |
| 44 | |
| 45 | - **GSAP** is the default for 95% of motion work — covers timeline orchestration, transforms, easing, stagger. All atomic rules in this skill are GSAP-based. |
| 46 | - **Lottie** when an asset has its own pre-baked timeline (typically After Effects exports). |
| 47 | - **Three.js** for 3D scenes, camera motion, shader-driven visuals. |
| 48 | - **Anime.js** for lightweight tweening when GSAP is overkill. |
| 49 | - **CSS** for simple repeated motifs, decoration, shimmer — no JavaScript animation cost. |
| 50 | - **WAAPI** for native browser keyframes without a GSAP dependency. |
| 51 | - **TypeGPU / WebGPU** for GPU-rendered canvases (particles, liquid glass, custom shaders). |
| 52 | |
| 53 | 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. |
| 54 | |
| 55 | ## Critical Constraints |
| 56 | |
| 57 | **Prerequisite: `hyperframes-core` → Non-Negotiable Rules** (single paused timeline, `data-duration` governs length, no `Math.random` / `Date.now` / `performance.now`, no `repeat: -1`, no page-load `gsap.set` on later-scene clips, no `display` or raw `visibility` tweens, and no timeline construction inside `async` / `setTimeout` / `Promise`). GSAP `autoAlpha` and zero-duration visibility sets at explicit timeline boundaries remain allowed by core. Use those exceptions only on non-clip elements or wrappers inside a clip; the framework owns `.clip` lifecycle. Don't restate the full contract here. |
| 58 | |
| 59 | Animation-craft additions on top of core's contract: |
| 60 | |
| 61 | - **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. |
| 62 | - **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. |
| 63 | |
| 64 | ## Scripts |
| 65 | |
| 66 | ```bash |
| 67 | node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \ |
| 68 | --out <composition-dir>/.hyperframes/anim-map |
| 69 | ``` |
| 70 | |
| 71 | 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. |
| 72 | |
| 73 | `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. |
| 74 | |
| 75 | ## See Also |
| 76 | |
| 77 | - `hyperframes-core` — composition structure, data attributes, sub-compositions, deterministic render contract |
| 78 | - `hyperframes-creative` — palettes, typography, narration, beat planning (non-animation creative direction) |
| 79 | - `hyperframes-cli` — `npx hyperframes lint / check / snapshot / preview / render` |
Related
6 picksType
- remotion-best-practicesRouter for all Remotion skillsJul 2026
- ai-image-generationGenerate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI.Jul 2026
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes,…Jul 2026
- hyperframesMandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo,…Jul 2026
- remotion-to-hyperframesPort an existing Remotion (React) composition''s source to HyperFrames HTML.Jul 2026
- hyperframes-coreThe HyperFrames composition contract — build one renderable project.Jul 2026
