hyperframes-animation
🎯Skillfrom heygen-com/hyperframes
|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(48 items)
Installation
npx vibeindex add heygen-com/hyperframes --skill hyperframes-animationnpx skills add heygen-com/hyperframes --skill hyperframes-animation~/.claude/skills/hyperframes-animation/SKILL.mdSKILL.md
More from this repository10
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.
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.
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.
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.
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.
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.
A media framework by HeyGen for building interactive video experiences with composable frames and real-time rendering capabilities.
A fallback HyperFrames composition authoring skill for custom video creation when no specialized workflow fits. Handles multi-scene pieces, brand reels, montages, title cards, motion posters, static loops, and freeform compositions at any length or format.
Converts arbitrary text (articles, notes, topics, briefs) into faceless explainer videos with auto-generated TTS narration and LLM-designed visuals including typography, abstract graphics, diagrams, and data visualizations.