skills.rest
ehadziabdic
ehadziabdicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-animation

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Authoring motion for HyperFrames video compositions requires coordinating timelines, eases, staggers, and runtime APIs while staying seek-safe and deterministic; this Skill centralizes all animation knowledge so agents can pick proven motion recipes instead of inventing choreography from scratch. ## Core Features & Use Cases - Atomic motion rules: 30+ composable GSAP recipes (kinetic type, camera flights, cursor choreography, particle bursts) that run on a single paused, seek-safe 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. - Choreography auditing: the animation-map.mjs script samples registered timelines and flags dead zones, stagger inconsistencies, and lifecycle warnings. - Use Case: When building a product-launch video frame, pick the prompt-type-submit-generate blueprint, compose 2-4 rules like spring-pop-entrance and discrete-text-sequence, then audit the result with the animation map script. ## Quick Start Use the hyperframes-animation skill to animate this composition scene with a staggered card entrance and a camera push-in 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 composition scene?▼

Pick 2-4 atomic rules from the rules index and compose them on a single paused GSAP timeline registered on window.__timelines. For full multi-phase shots, load a time-coded blueprint from the blueprints index and instantiate its slots and signature move.

Which animation library should I use for HyperFrames motion?▼

GSAP is the default for most 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, WAAPI for native keyframes, and TypeGPU for GPU-rendered canvases.

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

Flicker comes from CSS transitions on animated elements, relative += tweens, Math.random or Date.now calls, or DOM measurements at tween time. Use fromTo with explicit from-states, absolute values, index-derived pseudo-random, and pre-calculated layout constants.

Can I use Lottie or Three.js animations with HyperFrames?▼

Yes, each runtime has an adapter. Lottie instances must use autoplay false and loop false and be pushed to window.__hfLottie; Three.js uses AnimationMixer with hf-seek so the framework can seek every registered instance deterministically.

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

Run node skills/hyperframes-animation/scripts/animation-map.mjs on the composition directory. It enumerates tweens on registered timelines, samples bounding boxes, and outputs animation-map.json flagging dead zones, stagger consistency, and lifecycle warnings.

What CSS properties are forbidden in HyperFrames animations?▼

Width, height, top, and left tweens are forbidden for layout changes; use GSAP transform aliases like x, y, scale, and rotation instead. Opacity, color, backgroundColor, and borderRadius are allowed for non-spatial paint-only tweens.

Related Skills

Explore More Design & Creative Skills→
AnderHonoratoAnderHonorato

hyperframes-core

Build renderable HyperFrames video compositions from HTML with data-attribute timing.

Community
Advanced
vibe-motionvibe-motion
236

hyperframes-cli

Manage HyperFrames project scaffolding, validation, preview, rendering, and cloud deployment workflows.

Official
Advanced
chmonitorchmonitor
255

hyperframes-creative

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

Official
Advanced
sixscripts-aisixscripts-ai

lottie-animations

Implement After Effects Lottie animations in web and React applications.

Community
Advanced