hyperframes-motion

Author, inspect, and render deterministic HyperFrames animations with atomic rules and runtime adapters.

236|31|Updated Jun 29, 2026

Search Tags:#motion design #gsap #hyperframes #animation rules #runtime adapters #scene blueprints

Ready to run

npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-motion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyperframes-motion
Source: https://github.com/vibe-motion/auto-motion/tree/main/exampleFolder/.claude/skills/hyperframes-motion
Command: npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hyperframes/producer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill centralizes the motion-design knowledge needed to author HyperFrames animations without guessing at easing, timing, transforms, or runtime-specific APIs.

Core Features & Use Cases

Atomic motion rules: Compose small, reusable animation patterns like typing, zooms, cards, counters, and transitions.
Scene blueprints: Reuse proven multi-phase choreography templates for brand reveals, demos, comparisons, workflows, and calls to action.
Runtime adapters: Apply the same seek-safe animation contract across GSAP, Lottie, Three.js, Anime.js, CSS keyframes, WAAPI, and TypeGPU.
Use case: Build a polished product explainer by combining a blueprint, a few atomic rules, and the right adapter-specific reference.

Quick Start

Use the hyperframes-motion skill to choose the motion pattern, runtime adapter, and choreography structure that best fit your scene.

Frequently Asked Questions about hyperframes-motion

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

FAQPage Schema

How do I build deterministic motion design animations without trial-and-error?▼

HyperFrames motion design uses atomic rules, multi-phase scene blueprints, and runtime adapters to author and render animated scenes without trial-and-error or guessing at easing and timing.

What is the best way to choreograph multi-phase animation scenes for product demos?▼

Use proven scene blueprints for brand reveals, demos, and comparisons, combined with reusable atomic motion patterns and runtime adapters to choreograph multi-phase animation scenes.

Does the HyperFrames motion system support GSAP, Lottie, and Three.js?▼

Yes, the system provides runtime adapters to apply a seek-safe animation contract across GSAP, Lottie, Three.js, Anime.js, CSS keyframes, WAAPI, and TypeGPU.

How do I structure seek-safe timelines for visual storytelling?▼

Structure seek-safe timelines by applying deterministic composition constraints and on-demand reference loading, ensuring visual storytelling scenes remain fully renderable and inspectable.

Can I compose reusable animation patterns for transitions and counters?▼

Yes, you can compose small, reusable atomic motion rules for typing, zooms, cards, counters, and transitions to build polished explainers without repeating custom animation logic.

Why do my animated scenes fail to render properly during inspection?▼

Animated scenes fail to render during inspection if they lack paused seek-safe timelines, on-demand reference loading, and deterministic composition constraints required by the HyperFrames adapter contract.