hyperframes-animation
🎯Skillfrom heygen-com/hyperframes
Installation
npx vibeindex add heygen-com/hyperframes --skill hyperframes-animationnpx skills add heygen-com/hyperframes --skill hyperframes-animation~/.claude/skills/hyperframes-animation/SKILL.md
Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.
Overview
HyperFrames Animation is the motion layer of the HyperFrames video-from-HTML framework. It consolidates all animation concerns into a single skill: atomic motion rules (composable recipes for individual effects), multi-phase scene blueprints (pre-designed choreography templates), scene-to-scene transitions, broader motion-design techniques, and per-runtime adapters for seven animation engines. The default workflow is to pick 2-4 atomic rules and compose them on a single paused GSAP timeline, producing minimal seek-safe and deterministic code.
Key Features
- Atomic motion rules with a searchable index organized by trigger and tag, each rule providing full HTML/CSS/GSAP recipes ready to compose
- Scene blueprints for complex multi-phase choreographies (brand reveals, social proof sequences, demo scroll spotlights) with runnable HTML examples
- Seven runtime adapters: GSAP (default), Lottie/dotLottie for After Effects exports, Three.js for 3D/WebGL scenes, Anime.js, CSS keyframes, Web Animations API, and TypeGPU for GPU-accelerated motion
- CSS-driven scene transitions with a full catalog and overview documentation
- GSAP deep-dive references covering easing, stagger patterns, timeline labels, transforms, and performance optimization
- Animation map analysis script for inspecting existing compositions
Who is this for?
Developers and motion designers building seek-safe, deterministic video compositions with HyperFrames who need a unified reference for all animation patterns, whether combining simple atomic effects on a GSAP timeline or orchestrating complex multi-phase scenes across different rendering engines.
Same repository
heygen-com/hyperframes(52 items)
SKILL.md
More from this repository10
Resolves media needs (background music, sound effects, images, icons) into frozen local files by searching the HeyGen catalog, downloading the best match, and registering it in a manifest. One resolve command handles the full cascade from cache lookup to provider search to file freezing.
The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.
Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.
Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.
CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.
Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.
Creates product launch, SaaS promo, feature reveal, and marketing videos using HyperFrames. Takes a product URL for brand capture or a brief/script, then produces a professionally structured promotional video.
A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.
A HyperFrames skill for authoring navigable slideshow compositions with discrete slides, fragment reveals, branching sequences, and hotspot navigation for presentations and pitch decks.
A HyperFrames skill that turns a music track into a beat-synced video by analyzing the audio, laying out frames on the beat grid, and building each frame as a composition with typography and optional user-supplied media.