skills.rest
vibe-motion
vibe-motionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/vibe-motion/auto-motion --skill hyperframes-motion
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
1veso1veso

three

Create deterministic Three.js scenes synchronized with HyperFrames hf-seek events.

Community
Intermediate
frankxaifrankxai
6

arcanea-scene-craft

Automate narrative prompts into structured scene blueprints using the Scene Equation.

Community
Basic
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

hyperframes-animation

Create complex animations across GSAP, Lottie, Three.js, and other runtimes.

Official
Advanced
DevHive1DevHive1
18

video-js

Generate 16:9 motion graphics with React, Framer Motion, GSAP, and Three.js.

Community
Advanced