skills.rest
Chau165
Chau165COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-animation

Compose deterministic GSAP-led animations for HyperFrames compositions using atomic motion rules and scene blueprints.

Updated Jul 22, 2026
Search Tags:#animation#three.js#motion design#gsap#lottie#kinetic typography#video composition
One-click install
npx skills add https://github.com/Chau165/local_skill --skill hyperframes-animation-chau165
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-animation
Source: https://github.com/Chau165/local_skill/tree/main/codex/skills/hyperframes-animation
Command: npx skills add https://github.com/Chau165/local_skill --skill hyperframes-animation-chau165

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Authoring motion for HyperFrames video compositions requires coordinating timelines, cameras, characters, and runtime APIs while keeping every frame deterministic and seek-safe; this Skill consolidates all animation knowledge into reusable rules, blueprints, transitions, and runtime adapters. ## Core Features & Use Cases - Atomic motion rules: Pick 2-4 recipes from rules-index.md (kinetic typography, camera flights, cursor choreography, particle bursts) and glue them with a single paused GSAP timeline. - Scene blueprints: Instantiate 22 time-coded shot templates (kinetic-type-beats, cursor-ui-demo, prompt-type-submit-generate) mapped to storyboard roles like Hook, Key_Feature, and CTA. - Runtime adapters: Route work to GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, or TypeGPU depending on the asset and scene type. - Use Case: Animate a cartoon cutout explainer by rigging layered image assets, staging intent-to-reaction beats, and auditing the result with the animation-map script. ## Quick Start Ask the agent to animate a HyperFrames scene using two or three rules from the rules index on a single paused GSAP timeline.

Frequently Asked Questions about hyperframes-animation

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

FAQPage Schema
How do I animate a HyperFrames scene with GSAP?▼

Pick 2-4 atomic rules from rules-index.md and compose them on one paused GSAP timeline registered on window.__timelines. Use fromTo tweens with explicit from-states so the scene renders correctly at any seek position.

Which animation runtime should I use for HyperFrames motion?▼

GSAP is the default for about 95% of motion work, covering timelines, transforms, easing, and stagger. Use Lottie for pre-baked After Effects assets, Three.js for 3D scenes, Anime.js for lightweight tweening, CSS for simple decoration, and TypeGPU for GPU-rendered canvases.

Can I use Math.random or infinite loops in HyperFrames animations?▼

No. All motion must be deterministic and finite: Math.random, Date.now, and repeat: -1 are forbidden. Use index-derived pseudo-random values and baked schedules so every frame renders identically under seek.

Why does my HyperFrames animation flicker or desync when seeking?▼

Flicker usually comes from CSS transitions on animated elements, relative += tweens, or DOM measurements like getBoundingClientRect at tween time. Compute layout constants once at setup and animate only transforms and paint-only properties.

How do I animate image-based cartoon characters in HyperFrames?▼

Treat approved image assets as the artwork: animate img wrappers, layered SVG groups, or Lottie internals on separate background, midground, and actor layers. Rig around meaningful parts and stage beats as intent, anticipation, action, contact, and reaction.

Related Skills

Explore More Design & Creative Skills→
heygen-comheygen-com
43.5k

hyperframes-core

Defines the composition contract for building renderable HyperFrames HTML video projects.

Official
Advanced
heygen-comheygen-com
40.2k

hyperframes-cli

Scaffold, lint, preview, and render HTML-based HyperFrames compositions.

Official
Intermediate
chmonitorchmonitor
255

hyperframes-creative

Generate brand-aligned visual systems for HyperFrames video productions from design specifications.

Official
Advanced
markus41markus41
18

Text Animations Skill

Generate React and Framer Motion text animation effects.

Community
Intermediate