skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author ā†’
WebsiteGitHub

hyperframes-animation

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

Updated Aug 28, 2026
Search Tags:#animation#three.js#motion design#gsap#lottie#kinetic typography#video composition
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill hyperframes-animation-anderhonorato
Or copy as Structured Prompt for Agentā–¼
Please help me install this Agent Skill.
Skill: hyperframes-animation
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/html-video-production/references/hyperframes-animation
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill hyperframes-animation-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

šŸ’” This Skill requires gsap, lottie, three, animejs, and includes scripts (resource) and references (resource) components.

What problem does it solve? Authoring motion for HyperFrames video compositions requires choosing the right animation patterns, runtime APIs, and scene choreography while respecting a strict deterministic render contract. This Skill consolidates all animation knowledgeā€”atomic motion rules, multi-phase scene blueprints, transitions, and per-runtime adaptersā€”into one reference so you can build seek-safe, paused-timeline animations without guesswork. ## Core Features & Use Cases - Atomic Motion Rules: Pick 2-4 composable recipes (kinetic typography, camera zooms, SVG path drawing, spring entrances, tracking boxes) and glue them together with a single paused GSAP timeline. - Scene Blueprints: Load 15 time-coded shot templates (kinetic-type-beats, cursor-ui-demo, logo-assemble-lockup, etc.) mapped to storyboard roles like Hook, Problem, Key_Feature, and CTA. - Runtime Adapters: Look up API guidance for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU, all registered for deterministic frame-by-frame seeking. - Choreography Auditing: Run the animation-map script to analyze an existing composition's timelines, detect dead zones, and verify stagger consistency. - Use Case: When building a product-launch video scene, select the grid-card-assemble blueprint for a feature showcase, apply the spring-pop-entrance and depth-of-field-blur rules, and validate the result with the animation-map script. ## Quick Start Ask the AI to compose a HyperFrames scene animation by picking rules from the rules index and wiring them into a single paused GSAP timeline registered on window.__timelines.

Frequently Asked Questions about hyperframes-animation

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

FAQPage Schema
How do I create animations for HyperFrames compositions?ā–¼

Pick 2-4 atomic motion rules from the rules index and compose them on a single paused GSAP timeline registered on window.__timelines with the composition's data-composition-id. For full scenes, load a time-coded blueprint matching the storyboard role instead of starting from scratch.

Which animation library should I use with HyperFrames?ā–¼

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 Lottie animations in a HyperFrames composition?ā–¼

Yes, but the Lottie instance must use autoplay false and loop false, and be pushed onto window.__hfLottie so the runtime can seek it deterministically. Repeating cycles or non-default speed must be baked into the asset or an explicit timeline.

Why is Math.random or Date.now forbidden in HyperFrames animations?ā–¼

The renderer samples frames in parallel and seeks the timeline deterministically, so wall-clock or random values produce inconsistent frames. All motion must be driven by the paused timeline's time, with positions pre-calculated at composition setup.

How do I audit an existing composition's animation choreography?ā–¼

Run the animation-map.mjs script against the composition directory. It reads every GSAP timeline on window.__timelines, enumerates tweens, 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 social-proof and reusing its phase pipeline saves real authoring time. Otherwise composing 2-4 atomic rules is faster and produces less code.

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
hugotownhugotown

animejs

Registers Anime.js animations as seek-driven instances inside HyperFrames compositions.

Community
Intermediate
chmonitorchmonitor
255

hyperframes-creative

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

Official
Advanced
CodeWithSallyCodeWithSally
13

hyperframes-keyframes

Author seek-safe 2D and 3D keyframe animations for HyperFrames video compositions.

Official
Advanced