hyperframes-animation

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, demo-page-scroll-spotlight, 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) and examples/<id>.html (runnable sample). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.

Routing

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 contract
• hyperframes-creative — palettes, typography, narration, beat planning (non-animation creative direction)
• hyperframes-cli — npx hyperframes lint / validate / inspect / preview / render