skills.rest
CodeWithSally
CodeWithSallyOFFICIAL
Explore all skills by this author →
GitHub

hyperframes-animation

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

13|17|Updated Jan 30, 2025
Search Tags:#timeline#animation#motion design#gsap#deterministic rendering#kinetic typography#video composition
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill hyperframes-animation-codewithsally
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-animation
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/hyperframes-animation
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill hyperframes-animation-codewithsally

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 scene follows that contract without reinventing motion patterns. ## Core Features & Use Cases - Atomic motion rules: 40+ composable GSAP recipes (kinetic typography, camera flights, cursor choreography, particle bursts, SVG path drawing) that run on a single paused timeline and can be mixed 2-4 per scene. - Scene blueprints and transitions: 22 time-coded multi-phase shot templates (brand reveals, prompt-submit-generate demos, data-viz count-ups) mapped to storyboard roles like Hook, Key_Feature, and CTA. - 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: an animation-map script that enumerates timelines, samples bounding boxes, and flags dead zones or lifecycle issues in an existing composition. - Use Case: When building a product-launch video scene, pick the prompt-type-submit-generate blueprint, compose it from discrete-text-sequence and spring-pop-entrance rules, then audit 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 composed 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 a single 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 a HyperFrames composition?▼

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, Anime.js for lightweight tweening, CSS for simple decoration, WAAPI for native keyframes, and TypeGPU for GPU-rendered canvases.

What is the difference between a rule and a blueprint in HyperFrames animation?▼

A rule is an atomic motion recipe for a single effect like a spring-pop entrance or camera zoom. A blueprint is a time-coded multi-phase scene template with slots and a signature move, used when a full shot matches a pre-designed shape such as brand-reveal or dataviz-countup.

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

Flicker comes from CSS transitions on animated elements, relative += tweens, Math.random, or measuring the DOM at tween time with getBoundingClientRect. Use absolute fromTo tweens, index-derived pseudo-random values, and pre-calculated layout constants instead.

Can I use Lottie or Three.js animations inside a HyperFrames composition?▼

Yes, each runtime has an adapter. Lottie instances must use autoplay false and loop false and be pushed to window.__hfLottie; Three.js animations register similarly so HyperFrames can seek every instance to the composition time in one pass.

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

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

Related Skills

Explore More Design & Creative Skills→
vibe-motionvibe-motion
236

hyperframes-core

Build renderable HyperFrames compositions from HTML and GSAP with deterministic rendering constraints.

Official
Advanced
vibe-motionvibe-motion
236

hyperframes-cli

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

Official
Advanced
Noetfield-SystemsNoetfield-Systems

hyperframes-creative

Directs palettes, typography, narration, and beat planning for HyperFrames video compositions.

Official
Advanced
calesthiocalesthio
55.1k

hyperframes-animation

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

Community
Advanced