skills.rest
noemdb
noemdbCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-animation

Compose deterministic GSAP animations for HyperFrames compositions using atomic rules, blueprints, and runtime adapters.

1|Updated Jan 10, 2024
Search Tags:#animation#three.js#motion design#gsap#lottie#kinetic typography#video composition
One-click install
npx skills add https://github.com/noemdb/cfla --skill hyperframes-animation-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-animation
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/hyperframes-animation
Command: npx skills add https://github.com/noemdb/cfla --skill hyperframes-animation-noemdb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Authoring motion for HyperFrames video compositions requires choreography that is seek-safe, deterministic, and renderable frame-by-frame; this Skill provides the complete animation knowledge base so every tween, camera move, and transition satisfies that contract without guesswork. ## Core Features & Use Cases - Atomic motion rules: 40+ composable GSAP recipes (kinetic typography, camera flights, cursor choreography, particle bursts) that combine 2-4 per scene on a single paused timeline. - Scene blueprints and transitions: 22 time-coded multi-phase shot templates (brand reveals, prompt-submit-generate demos, data-viz count-ups) plus a scene-transition catalog. - Seven runtime adapters: API references for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU/WebGPU, all registered for unified seeking. - Choreography auditing: the animation-map.mjs script enumerates timelines, samples bounding boxes, and flags dead zones or lifecycle warnings. - Use Case: Building a product-launch video scene where a typed prompt triggers a streaming answer, then a logo assembles with spring-pop entrances — pick the blueprint, apply the rules, and audit the result. ## Quick Start Ask the agent to animate a HyperFrames scene, for example: create a kinetic typography hook using the kinetic-beat-slam rule 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 the rules index and compose them on one paused GSAP timeline registered on window.__timelines. Use fromTo tweens with explicit from-states so the scene is seek-safe in both directions.

Which animation runtime should I use for HyperFrames motion?▼

GSAP is the default for most motion work including timelines, transforms, easing, and stagger. Use Lottie for pre-baked After Effects assets, Three.js for 3D scenes, CSS for simple decorative loops, and TypeGPU for GPU-rendered canvases.

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

No. Animations must be deterministic: Math.random, Date.now, and performance.now are forbidden, and repeat: -1 is not allowed. Use index-derived pseudo-random values and finite repeats so every frame renders identically.

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 audit an existing composition's choreography?▼

Run the animation-map.mjs script against the composition directory. It enumerates every registered GSAP timeline, samples bounding boxes, and outputs an animation-map.json flagging dead zones, stagger inconsistencies, and lifecycle warnings.

When should I use a blueprint instead of composing atomic rules?▼

Use a blueprint when the scene matches a pre-designed multi-phase template like brand-reveal or prompt-type-submit-generate and reusing its phase pipeline saves authoring time. Otherwise composing 2-4 atomic rules is faster and produces less code.

Related Skills

Explore More Design & Creative Skills→
X-RANKFLOW-MEDIA-GROUPX-RANKFLOW-MEDIA-GROUP

slideshow

Build interactive HyperFrames slideshows from scene definitions and JSON islands.

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
freshtechbrofreshtechbro
682

lottie-animations

Integrate Lottie JSON and dotLottie animations into web and React applications.

Community
Intermediate