css-animations
๐ฏSkillfrom heygen-com/hyperframes
|A CSS Animations adapter skill for HyperFrames, the open-source HTML-to-video rendering framework by HeyGen. Enables AI coding agents to use CSS animations and keyframes within HyperFrames video compositions.
Overview
The css-animations skill is a HyperFrames adapter that teaches AI agents how to write CSS keyframe animation patterns compatible with HyperFrames video rendering. Standard CSS animations run on wall-clock time, making them non-deterministic during frame capture. This skill provides patterns that let HyperFrames discover, pause, and seek CSS animations frame-by-frame.
Key Features
- CSS @keyframes patterns that HyperFrames can automatically discover and control during frame-accurate rendering
- Seekable animation techniques where HyperFrames pauses and steps through CSS animations at each captured frame
- Works alongside other adapters (GSAP, Anime.js, Lottie, Three.js, WAAPI) for mixed-runtime compositions
- Integrates with the HyperFrames dev-loop: init, preview, lint, and render to MP4
- Deterministic rendering where identical inputs always produce identical video output
Who is this for?
- Developers who prefer pure CSS animations over JavaScript libraries when building HyperFrames compositions
- AI agent users who need CSS keyframe animations to render correctly in the frame capture pipeline
- Teams wanting lightweight, dependency-free animations within automated video pipelines
Same repository
heygen-com/hyperframes(48 items)
Installation
npx vibeindex add heygen-com/hyperframes --skill css-animationsnpx skills add heygen-com/hyperframes --skill css-animations~/.claude/skills/css-animations/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.
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.
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.