hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Updated Feb 27, 2026

Search Tags:#animation #motion design #Three.js #GSAP #Lottie #web animation

Ready to run

npx skills add https://github.com/zeitlinb/contentmonster --skill hyperframes-animation-zeitlinb

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyperframes-animation
Source: https://github.com/zeitlinb/contentmonster/tree/main/.agents/skills/hyperframes-animation
Command: npx skills add https://github.com/zeitlinb/contentmonster --skill hyperframes-animation-zeitlinb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, lottie-web, three, animejs, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides the tools to create and composite motion designs, solving the challenge of crafting complex animations manually.

Core Features & Use Cases

Atomic Motion Rules: Select and combine atomic motion patterns for various animation tasks.
Scene Blueprints: Utilize pre-designed multi-phase scene templates to save authoring time.
Runtime Adapters: Access APIs for different animation runtimes like GSAP, Lottie, Three.js, etc.
Use Case: A designer wants to create a dynamic text animation for a landing page. Using this Skill, they can choose a set of atomic motion rules and blueprints, and then use the appropriate runtime adapter to compose the final animation.

Quick Start

To animate a text element using the GSAP runtime, run: use hyperframes-animation -t gsap -r rules/text-effects.md -e text-element.html

Frequently Asked Questions about hyperframes-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I compose complex web animations using GSAP and Lottie without writing them manually?▼

To compose web animations without manual coding, this Skill provides atomic motion rules and scene blueprints that combine multi-phase templates. You select patterns and apply runtime adapters for GSAP, Lottie, or Three.js to generate the final animation.

What is the best way to structure multi-phase motion design scenes for a landing page?▼

The best way to structure multi-phase motion design scenes is using pre-designed scene blueprints. These templates provide structured phases for landing page animations, saving authoring time by offering adaptable blueprints for dynamic text and UI elements.

Can I use Three.js for web animation projects if I only know HTML, CSS, and JavaScript?▼

You can use Three.js for web animation projects with HTML, CSS, and JavaScript knowledge. The Skill provides runtime adapters that access Three.js APIs, alongside GSAP and Lottie, allowing you to compose complex 3D motion without deep runtime expertise.

Does this motion design tool support combining atomic motion patterns across different runtimes?▼

This motion design tool supports combining atomic motion patterns across different runtimes. It includes runtime adapters for GSAP, Lottie, Three.js, and Anime.js, allowing you to select and composite atomic rules within a single animation project.

How do I animate a text element using the GSAP runtime adapter?▼

To animate a text element using the GSAP runtime adapter, run the command with the GSAP tag, reference the text-effects rules, and specify your HTML element. This composes the final animation by applying atomic motion rules to your target.