# HyperFrames Animation — Motion Knowledge Pack

Stop reinventing animation patterns. HyperFrames Animation gives AI agents 30+ atomic motion rules, 12 multi-phase scene blueprints, 7+ ready-to-run scene transitions, broader motion-design techniques, AND runtime adapters for GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, and TypeGPU — all deterministic, seek-safe, and composition-native.

## Install

```bash
npx skillstore add heygen-com/hyperframes-animation
```

## Metadata

- - Slug: heygen-com-hyperframes-animation
- - Version: 1.0.0
- - Author: heygen-com
- - GitHub username: heygen-com
- - License: MIT
- - Repository: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-animation/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands, network, filesystem, scripts, env\_access
- - Quality score: 75
- - Public page: https://skillstore.pages.dev/skills/heygen-com-hyperframes-animation
- - Manifest: https://skillstore.pages.dev/api/skills/heygen-com-hyperframes-animation/manifest

## Capabilities

- Pick and compose 2–4 atomic motion rules from a catalog of 30\+ \(e.g. kinetic-beat-slam, count-up, SVG-path-draw, cursor-click-ripple, orbit-3d-entry\) by reading rules-index.md and the matching rules/<name\>.md
- Load multi-phase scene blueprints \(brand-reveal-assemble-zoom, hook-counter-burst, takeover-ticker-displace, comparison-split-cards, demo-page-scroll-spotlight, etc.\) including the runnable HTML example
- Apply pre-built scene-to-scene transitions from a catalog of CSS-driven transitions \(cover, radial, dissolve, 3d, grid, light\)
- Look up runtime-specific API: GSAP eases / stagger / timeline labels / transforms-and-perf, Lottie player setup, Three.js AnimationMixer with hf-seek, Anime.js timelines, CSS keyframes \+ animation-delay, WAAPI element.animate\(\), TypeGPU WGSL pipelines
- Wire a runtime adapter by registering the framework's instance on the runtime-specific global \(window.\_\_hfLottie, window.\_\_hfAnime, etc.\) so HyperFrames can seek all runtimes in one pass
- Audit a finished composition's animation choreography with scripts/animation-map.mjs to detect dead zones, stagger inconsistency, and lifecycle warnings
- Combine multiple animation runtimes inside one composition \(e.g. GSAP for orchestration \+ Lottie for an embedded After Effects asset \+ Three.js for a 3D background\) without re-registration
- Follow framework-safe spatial motion by using GSAP transform aliases only \(x, y, scale, rotation\) — never width/height/top/left at tween time

## Use Cases

- Animate a hero product-launch video: Compose 2–4 atomic rules \(e.g. kinetic-beat-slam \+ scale-swap-transition \+ counting-dynamic-scale \+ avatar-cloud-network\) into one paused GSAP timeline for a 30-second product reveal.
- Build a multi-phase explainer from a blueprint: Read blueprints/problem-mockup-overwhelm.md \+ examples/problem-mockup-overwhelm.html to drop a fully-choreographed 4-phase explainer \(problem → mockup → overwhelm → resolution\) into a composition.
- Embed a Lottie / After Effects asset inside a HyperFrames clip: Load adapters/lottie.md, register the Lottie player on window.\_\_hfLottie, and let HyperFrames seek the Lottie timeline in lockstep with the GSAP master timeline.
- Run a 3D camera-orbit scene with Three.js: Read adapters/three.md and rules/orbit-3d-entry.md to wire a Three.js AnimationMixer, expose its clock to HyperFrames' hf-seek, and produce a deterministic frame-by-frame render.
- Audit a finished composition's animation choreography: Run \`node scripts/animation-map.mjs <composition-dir\>\` to enumerate every tween, sample bounding boxes at N frames, and surface dead zones, stagger drift, and lifecycle warnings in animation-map.json.

## Prompt Templates

### Compose atomic rules for a hero beat

```
Pick 2-4 rules from skills/hyperframes-animation/rules-index.md that best fit a hero beat for a product reveal (e.g. kinetic-beat-slam + scale-swap-transition + counting-dynamic-scale). Glue them into one paused GSAP timeline. Use only GSAP transform aliases (x, y, scale, rotation) for spatial motion. Compute layout constants at composition setup, never via getBoundingClientRect() at tween time. Validate with `npx hyperframes validate` before previewing.
```

### Load a multi-phase blueprint

```
Read skills/hyperframes-animation/blueprints-index.md and pick the blueprint whose phase pipeline matches the request (likely problem-mockup-overwhelm, concept-demo-decode-pan, or cta-morph-press). Then read both blueprints/<id>.md and examples/<id>.html to get the full recipe and runnable HTML. Adapt the recipe to the current composition; never copy-paste without checking data-duration matches the scene budget.
```

### Add a Lottie or Three.js runtime adapter

```
Read skills/hyperframes-animation/adapters/lottie.md (or adapters/three.md). Wire the player instance onto the runtime-specific global (window.__hfLottie or window.__hfAnime). Expose the framework's clock to HyperFrames' hf-seek so the master timeline can seek the embedded runtime in lockstep. The GSAP master timeline remains single, paused, and deterministic.
```

### Audit a finished composition

```
Run `node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> --out .hyperframes/anim-map`. Read the resulting animation-map.json, surface any tween with zero motion in its sample frames, any stagger that drifts >10% across siblings, and any clip whose lifecycle violates hyperframes-core's contract. Report findings as a checklist.
```

## Limitations

- Requires the hyperframes-core skill to be installed first — this skill depends on core's composition contract \(data-\* timing attributes, single paused timeline, determinism rules\)
- Two Node.js helper scripts \(animation-map.mjs, package-loader.mjs\) require Node 18\+ and execute locally; they will prompt before running any npm install
- Examples load GSAP / Lottie from public CDNs \(cdn.jsdelivr.net, cdnjs.cloudflare.com\); offline use requires self-hosting those runtimes
- GSAP-based rules assume GSAP 3.x is available; Lottie / dotLottie adapter requires lottie-web; Three.js adapter requires three 0.150\+
- Animation-map analysis is post-hoc — it audits a finished composition, it does not generate animation for you
- TypeGPU adapter assumes a WebGPU-capable browser and the typegpu npm package; falls back gracefully only when navigator.gpu is unavailable

## Best Practices

- Pick 2-4 atomic rules and compose them — don't reach for a blueprint unless the scene matches an existing pre-designed template
- Use only GSAP transform aliases \(x, y, scale, rotation\) for spatial motion; never tween width / height / top / left
- Compute layout constants once at composition setup — never call getBoundingClientRect\(\) at tween time
- Keep a single paused master timeline; register it on window.\_\_timelines so HyperFrames can seek it
- When embedding a second runtime \(Lottie / Three.js / Anime.js\), expose its clock to HyperFrames' hf-seek and don't let it run its own unpaused loop
- Run scripts/animation-map.mjs after every non-trivial change to surface dead zones and lifecycle warnings before render
- Match the runtime to the job: GSAP default, Lottie for AE exports, Three.js for 3D, Anime.js for lightweight tweens, CSS for decoration, WAAPI for native keyframes, TypeGPU for GPU shaders
- Validate with \`npx hyperframes validate\` \(headless Chrome\) before previewing — catches JS errors and missing assets the linter can't

## Anti Patterns

- Tweening layout properties \(width, height, top, left, margin\) at scene-time instead of pre-computed GSAP transform aliases
- Calling getBoundingClientRect\(\) at tween time — desyncs because the renderer samples in parallel
- Constructing a GSAP timeline inside async / setTimeout / Promise — breaks seek safety
- Letting a secondary runtime \(Lottie, Three.js\) run its own unpaused loop — desyncs from the master timeline
- Starting from a blueprint when 2-4 atomic rules would do — adds unnecessary code and authoring time
- Reaching for \`repeat: -1\` or \`gsap.set\` on later-scene clips — violates hyperframes-core's non-negotiable rules
- Skipping the animation-map audit before render — lets dead zones and stagger drift ship into the final video

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-26T09:17:27.533\+00:00
- - Summary: Static analyzer flagged 5077 keyword-pattern matches across 96 files \(risk score 100/100\). After manual review, the vast majority are false positives: the heuristic regexes fired on natural language in markdown documentation \(e.g. 'scene' for reconnaissance, 'shadow' for Windows SAM, 'key' for keylogger, 'hash' for weak crypto\) and on backtick characters in code-example fenced blocks — none of which indicate actual malicious code. The legitimate concerns are confined to two Node.js helper scripts: scripts/package-loader.mjs uses node:child\_process spawnSync to run 'npm install' only behind explicit user confirmation \(TTY prompt or HYPERFRAMES\_SKILL\_BOOTSTRAP\_DEPS=1\), with --ignore-scripts and --no-save, into a temporary prefix; and scripts/animation-map.mjs imports the loader and runs it as a CLI. Both are documented dependency-bootstrap paths for optional runtime adapters \(GSAP / Lottie / Three.js / Anime.js / TypeGPU\). One markdown rule file \(rules/hacker-flip-3d.md\) illustrates an innerHTML assignment inside a code snippet describing a 3D flip visual — illustrative, not executed. HTML examples load GSAP and Lottie from public CDNs \(cdn.jsdelivr.net / cdnjs.cloudflare.com\). Overall: a legitimate, well-scoped animation-framework skill with no malicious intent.

## Stats

- - Views: 0
- - Downloads: 7
- - Favorites: 1
- - Popularity score: 0