skills.rest
AbuBakar125-co
AbuBakar125-coCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-animation

Compose deterministic GSAP-based animations for HyperFrames video compositions from atomic motion rules and scene blueprints.

Updated Sep 6, 2026
Search Tags:#timeline#animation#three.js#motion design#gsap#kinetic typography#video composition
One-click install
npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill hyperframes-animation-abubakar125-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-animation
Source: https://github.com/AbuBakar125-co/Resturant_web/tree/main/agent/skills/hyperframes-animation
Command: npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill hyperframes-animation-abubakar125-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, lottie-web, 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, seek-safe rendering contract — this Skill consolidates all of that motion knowledge in one place. ## Core Features & Use Cases - Atomic motion rules: Pick and compose 2-4 reusable GSAP recipes (kinetic typography, camera flights, cursor choreography, particle bursts, SVG path drawing) on a single paused timeline. - Scene blueprints and transitions: Instantiate 22 time-coded multi-phase shot templates (kinetic-type-beats, cursor-ui-demo, prompt-type-submit-generate) mapped to storyboard roles like Hook, Key_Feature, and CTA. - Runtime adapters: Look up API guidance for GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU/WebGPU, plus 24 named text-animation effects. - Choreography auditing: Run the animation-map script to analyze a composition's timelines for dead zones, stagger consistency, and lifecycle warnings. - Use Case: When building a product-launch video frame, select the blueprint matching the frame's role, load its recipe, and compose the cited atomic rules into a deterministic paused GSAP timeline. ## Quick Start Ask the agent to animate a HyperFrames scene by picking rules from the rules index or loading a blueprint matching the frame's storyboard role.

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 composition with GSAP?▼

Pick 2-4 atomic rules from the rules index and compose them on a single 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 a HyperFrames scene?▼

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.

What is a HyperFrames blueprint and when should I use one?▼

A blueprint is a time-coded multi-phase shot template with slots and a signature move, mapped to storyboard roles like Hook or CTA. Load one when the scene matches an existing template; otherwise compose freely from atomic rules.

Why does my HyperFrames animation render non-deterministically?▼

Non-determinism comes from Math.random, Date.now, infinite repeats, or DOM measurements at tween time. Use index-derived pseudo-random values, finite repeats, and pre-calculated layout constants baked at composition setup.

Can I tween width or height in a HyperFrames animation?▼

No, width, height, top, and left tweens are forbidden because they trigger layout. Use GSAP transform aliases like x, y, scale, and rotation, or masks and counter-scale proxies for layout changes.

How do I audit an existing composition's animation choreography?▼

Run the animation-map script with node on the composition directory to enumerate every registered GSAP timeline, sample bounding boxes, and output a JSON report flagging dead zones, stagger inconsistencies, and lifecycle warnings.

Related Skills

Explore More Design & Creative Skills→
cosmicstack-labscosmicstack-labs
364

hyperframes

Create HTML-driven video compositions with timed clips and deterministic animation for MP4 rendering.

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
mooch10mooch10
1

hyperframes-animation

Compose deterministic GSAP animations from atomic motion rules, blueprints, and runtime adapters.

Community
Advanced