hyperframes-animation

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.

HyperFrames Animation

Contents

• Default: compose atomic rules
• Load a blueprint when
• Routing
• Picking a runtime
• Critical Constraints
• Scripts
• See Also
• Reference files

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
Motion blur — shutter smear on an element, and when not to use it	references/motion-blur.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
Character animation (walk cycle, mascot, jointed puppet, gestures)	adapters/lottie.md → Characters
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), including characters that walk, gesture or react.
• 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 → One paused timeline + Non-negotiable rules (single paused timeline, data-duration governs length, no Math.random / Date.now / performance.now, no repeat: -1 without a finite root data-duration, no page-load gsap.set on later-scene clips, no display or raw visibility tweens, and register the timeline only after it is fully built, including when the build runs inside an async callback such as document.fonts.ready). 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.

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 <SKILL_DIR>/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 / check / snapshot / preview / render

Reference files

Read the matching file directly when its topic applies; the indexes remain available for choosing among recipes.

Adapters

• Text Effects — Reference — Read when using this animation runtime or adapter API.
• Anime.js for HyperFrames — Read when using this animation runtime or adapter API.
• CSS Animations for HyperFrames — Read when using this animation runtime or adapter API.
• Easing, Stagger, and Function-Based Values — Read when using this animation runtime or adapter API.
• Timelines and Labels — Read when using this animation runtime or adapter API.
• Transforms and Performance — Read when using this animation runtime or adapter API.
• HyperFrames GSAP — Read when using this animation runtime or adapter API.
• HTML-in-Canvas Patterns — Read when using this animation runtime or adapter API.
• Lottie for HyperFrames — Read when using this animation runtime or adapter API.
• Three.js for HyperFrames — Read when using this animation runtime or adapter API.
• TypeGPU / WebGPU for HyperFrames — Read when using this animation runtime or adapter API.
• Web Animations API for HyperFrames — Read when using this animation runtime or adapter API.

Blueprints

• agent-progress-theater — Agent Progress Theater — Read when composing this multi-phase scene.
• camera-journey — Camera Journey — Read when composing this multi-phase scene.
• comparison-split — Comparison Split-Cards — Read when composing this multi-phase scene.
• constellation-hub — Constellation / Hub + Satellites — Read when composing this multi-phase scene.
• cta-morph-press — CTA Morph & Press — Read when composing this multi-phase scene.
• cursor-ui-demo — Cursor-Driven UI Demo — Read when composing this multi-phase scene.
• dataviz-countup — Data-Viz / Count-Up — Read when composing this multi-phase scene.
• device-surface-showcase — Device / Surface Showcase — Read when composing this multi-phase scene.
• fixed-anchor-cycle — Fixed Anchor, Cycling World — Read when composing this multi-phase scene.
• grid-card-assemble — Grid / Card Assemble — Read when composing this multi-phase scene.
• kinetic-type-beats — Kinetic-Type Beats — Read when composing this multi-phase scene.
• logo-assemble-lockup — Logo Assemble → Lockup — Read when composing this multi-phase scene.
• overwhelm-surround — Overwhelm / Close-In — Read when composing this multi-phase scene.
• panel-edit-live-sync — Panel Edit, Live Sync — Read when composing this multi-phase scene.
• prompt-type-submit-generate — Prompt, Submit, Generate — Read when composing this multi-phase scene.
• spatial-pan-stations — Spatial Pan / Stations — Read when composing this multi-phase scene.
• ticker-takeover — Ticker Displace / Takeover — Read when composing this multi-phase scene.
• titlecard-reveal — Title-Card / Single-Card Reveal — Read when composing this multi-phase scene.
• transcript-scroll-artifact-reveal — Transcript-Scroll Artifact Reveal — Read when composing this multi-phase scene.
• typewriter-reveal — Typewriter Reveal — Read when composing this multi-phase scene.
• video-text-pivot — Video → Text Pivot — Read when composing this multi-phase scene.
• zoom-out-workspace-reveal — Zoom-Out Workspace Reveal — Read when composing this multi-phase scene.

Guides

• Blueprints (the proven shapes) — Read when choosing a scene blueprint.
• Rules Index — Read when choosing atomic motion rules by trigger or tag.
• Visual Techniques Reference — Read when choosing broader motion-design techniques.

References

• Motion blur — shutter smear on any animated element — Read when choosing element-level motion blur and its limits.

Rules

• 3D Camera Flight — Read when applying this atomic motion recipe.
• 3D Page Scroll — Read when applying this atomic motion recipe.
• 3D Text Depth Layers — Read when applying this atomic motion recipe.
• AI Tracking Box — Read when applying this atomic motion recipe.
• Ambient Glow Bloom — Read when applying this atomic motion recipe.
• Anchored Layout Expand — Read when applying this atomic motion recipe.
• ASR Keyword Glow — Read when applying this atomic motion recipe.
• Avatar Cloud Network — Read when applying this atomic motion recipe.
• Two-Phase Camera Cursor Tracking — Read when applying this atomic motion recipe.
• Card Morph Anchor — Read when applying this atomic motion recipe.
• Center-Outward Expansion — Read when applying this atomic motion recipe.
• Chart Scrub Readout — Read when applying this atomic motion recipe.
• Chromatic Glitch — Read when applying this atomic motion recipe.
• Context-Sensitive Cursor — Read when applying this atomic motion recipe.
• Control-Target Sync — Read when applying this atomic motion recipe.
• Coordinate Target Zoom — Read when applying this atomic motion recipe.
• Counting with Dynamic Scale — Read when applying this atomic motion recipe.
• CSS Patterns for Marker Highlighting — Read when applying this atomic motion recipe.
• Cursor Click Ripple — Read when applying this atomic motion recipe.
• Cursor Drag — Read when applying this atomic motion recipe.
• Depth-of-Field Blur (Selective Focus / Rack Focus) — Read when applying this atomic motion recipe.
• Depth Scatter ↔ Assemble — Read when applying this atomic motion recipe.
• Discrete Text Sequence — Read when applying this atomic motion recipe.
• Dynamic Content Sequencing — Read when applying this atomic motion recipe.
• Gradient Text Sweep — Read when applying this atomic motion recipe.
• GSAP Effects for HyperFrames — Read when applying this atomic motion recipe.
• Hacker Flip 3D Reveal — Read when applying this atomic motion recipe.
• Kinetic Beat Slam — Read when applying this atomic motion recipe.
• Motion-Blur Streak — Read when applying this atomic motion recipe.
• Multi-Cursor Choreography — Read when applying this atomic motion recipe.
• Multi-Phase Camera — Read when applying this atomic motion recipe.
• Nudge Curve — Read when applying this atomic motion recipe.
• Orbit with 3D Entry — Read when applying this atomic motion recipe.
• Particle Burst — Read when applying this atomic motion recipe.
• Physics Press Reaction (Cursor + Element Synced) — Read when applying this atomic motion recipe.
• Press-Release Spring Chain — Read when applying this atomic motion recipe.
• Reactive Displacement — Read when applying this atomic motion recipe.
• Scale-Swap Transition — Read when applying this atomic motion recipe.
• Sine Wave Loop (subtle jitter / bounded ambient) — Read when applying this atomic motion recipe.
• Split Tilt Cards — Read when applying this atomic motion recipe.
• Spring-Pop Entrance — Read when applying this atomic motion recipe.
• Stat Bars & Fills — Read when applying this atomic motion recipe.
• SVG Icon Enrichment — Read when applying this atomic motion recipe.
• SVG Path Draw — Read when applying this atomic motion recipe.
• Theme Crossfade Morph — Read when applying this atomic motion recipe.
• Vertical Spring Ticker (Slot Machine) — Read when applying this atomic motion recipe.
• Viewport Change (Virtual Camera) — Read when applying this atomic motion recipe.
• Waterfall Entry — Read when applying this atomic motion recipe.

Transitions

• Transition Registry — machine source of truth — Read when choosing or implementing this scene transition.
• Transition Catalog — Read when choosing or implementing this scene transition.
• 3D — Read when choosing or implementing this scene transition.
• Blur — Read when choosing or implementing this scene transition.
• Cover — Read when choosing or implementing this scene transition.
• Destruction — Read when choosing or implementing this scene transition.
• Dissolve — Read when choosing or implementing this scene transition.
• Distortion — Read when choosing or implementing this scene transition.
• Grid — Read when choosing or implementing this scene transition.
• Light — Read when choosing or implementing this scene transition.
• Mechanical — Read when choosing or implementing this scene transition.
• Other — Read when choosing or implementing this scene transition.
• Linear / Push — Read when choosing or implementing this scene transition.
• Radial / Shape — Read when choosing or implementing this scene transition.
• Scale / Zoom — Read when choosing or implementing this scene transition.
• Scene Transitions — Read when choosing or implementing this scene transition.