HyperFrames Animation
FreeStreamline your animation workflow with comprehensive tools.
Free · Opens the source repo
What HyperFrames Animation does
HyperFrames Animation is a comprehensive skill designed for developers and designers who need to manage complex animations efficiently. It consolidates all essential motion knowledge into a single package, allowing users to access atomic motion rules, multi-phase scene blueprints, transitions, and broader motion-design techniques. The skill supports multiple runtime adapters, including GSAP, Lottie, Three.js, Anime.js, CSS animations, and the Web Animations API, enabling users to select the best tool for their specific animation tasks.
With HyperFrames, users can quickly compose animations by selecting 2-4 atomic rules and combining them with a single paused GSAP timeline. This approach is not only faster but also results in cleaner code compared to starting from a blueprint. When a scene aligns with an existing template, users can leverage pre-designed multi-phase blueprints to save time and ensure consistency in their animations. Each blueprint provides a runnable code example, making it easier to implement complex choreography without starting from scratch.
The skill also includes features for analyzing existing compositions, allowing users to audit an animation's choreography with an animation map. Additionally, it covers 24 named text-animation effects, which can be integrated into projects seamlessly. HyperFrames is particularly beneficial for those working on web animations, as it provides a structured approach to managing motion design while ensuring deterministic behavior across different runtimes.
Whether you are creating engaging web interfaces, dynamic presentations, or intricate visual storytelling, HyperFrames Animation equips you with the tools and knowledge to enhance your animation capabilities effectively. Its focus on performance and best practices makes it a valuable addition to any developer or designer's toolkit.
When to use it
Use HyperFrames Animation when you need to create intricate animations quickly and efficiently, especially when leveraging existing templates or rules.
When not to use it
This skill may not be suitable for projects requiring highly customized animations that do not fit within the provided rules or blueprints.
What you can build with it
Creating a Brand Reveal Animation
Utilize existing blueprints to design a brand reveal animation that aligns with your marketing strategy.
Implementing Complex Scene Transitions
Leverage multi-phase templates to create seamless transitions between different scenes in your web application.
Auditing Animation Performance
Analyze an existing animation's choreography to identify areas for optimization and improve performance.
How to install HyperFrames Animation
View source1. Install with the skills CLI
npx skills add heygen-com/hyperframes/hyperframes-animation --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by heygen-comHyperFrames 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 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.
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 permitsopacity/color/backgroundColor/borderRadiusfor non-spatial property tweens — but neverwidth/height/top/leftfor 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.
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 contracthyperframes-creative— palettes, typography, narration, beat planning (non-animation creative direction)hyperframes-cli—npx hyperframes lint / check / snapshot / preview / render
Frequently asked questions about HyperFrames Animation
Similar skills
Slack GIF Creator
Create optimized animated GIFs for Slack effortlessly.
Motion Graphics
Create short, design-led motion graphics effortlessly.
Motion Graphics
Create short, impactful motion graphics effortlessly.
Web Animation Design
Create purposeful and natural web animations.
Motion Doctrine
Streamline your animations with cohesive motion rules.
Remotion
Programmatically create videos with React.