skills.rest
Sma1lboy
Sma1lboyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-motion

Orchestrate deterministic multi-phase GSAP motion scenes with synchronized timelines.

94|7|Updated May 9, 2026
Search Tags:#typography#animation#choreography#webgl#motion design#gsap
One-click install
npx skills add https://github.com/Sma1lboy/kobe --skill hyperframes-motion-sma1lboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-motion
Source: https://github.com/Sma1lboy/kobe/tree/main/.claude/skills/hyperframes-motion
Command: npx skills add https://github.com/Sma1lboy/kobe --skill hyperframes-motion-sma1lboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes scripts (resource) components.

What problem does it solve?

This Skill solves the fragmentation and non-determinism in web animation by providing a unified, GSAP-based framework for composing complex, multi-phase motion scenes that remain seek-safe and deterministic.

Core Features & Use Cases

  • Atomic Motion Rules: Access a library of pre-built, composable animation recipes like hacker-flips, vertical tickers, and 3D depth layers.
  • Scene Blueprints: Load complex, multi-phase choreography templates for common narrative roles like social proof, product demos, and brand reveals.
  • Multi-Runtime Support: Orchestrate GSAP, Lottie, Three.js, and WebGPU animations within a single, synchronized timeline.
  • Use Case: Use this Skill to author a 10-second product demo where a 3D-tilted webpage scrolls to a feature section, keywords glow in sync with audio, and a radial spotlight highlights the UI, all while maintaining perfect frame-by-frame determinism.

Quick Start

Use the hyperframes-motion skill to generate an animation map for the composition located in the current directory.

Frequently Asked Questions about hyperframes-motion

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

FAQPage Schema
How do I create deterministic motion design with GSAP?▼

Deterministic motion design with GSAP requires a single paused timeline and pre-calculated layout constants. This framework ensures seek-safe, frame-by-frame render consistency by orchestrating complex multi-phase scenes without animation fragmentation or non-deterministic playback.

How do I synchronize text-to-audio choreography in web animation?▼

Synchronizing text-to-audio choreography in web animation requires a unified timeline orchestration. This framework supports synchronized text-to-audio choreography by binding procedural animations and audio triggers within a single deterministic GSAP timeline.

Can I orchestrate Lottie and Three.js animations within a single timeline?▼

Yes, you can orchestrate Lottie and Three.js animations within a single timeline. The framework provides multi-runtime support to synchronize GSAP, Lottie, Three.js, and WebGPU animations together while maintaining perfect frame-by-frame determinism.

What is the best way to build multi-phase scene choreography for product demos?▼

Building multi-phase scene choreography for product demos is best handled using pre-built scene blueprints. The framework provides complex choreography templates for common narrative roles like social proof, product demos, and brand reveals to ensure consistent orchestration.

Why does my web animation break when seeking the timeline?▼

Web animation breaks during timeline seeking due to non-deterministic layout calculations. This framework solves the issue by requiring a structured composition environment with a single paused timeline and pre-calculated layout constants to guarantee render consistency.

Related Skills

Explore More Design & Creative Skills→
vibe-motionvibe-motion
236

hyperframes-core

Build renderable HyperFrames compositions from HTML and GSAP with deterministic rendering constraints.

Official
Advanced
AgentchengfengAgentchengfeng
2.8k

口播成片

Automate video production from spoken scripts with storyboard, timeline, and export.

Community
Advanced
linegellinegel
5

threejs-object-sculptor

Convert images into procedural Three.js models with geometry, materials, and lighting.

Community
Advanced
zeitlinbzeitlinb

hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Community
Advanced