css-animations
๐ฏSkillfrom heygen-com/hyperframes
Installation
npx vibeindex add heygen-com/hyperframes --skill css-animationsnpx skills add heygen-com/hyperframes --skill css-animations~/.claude/skills/css-animations/SKILL.md
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(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.
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.
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.