hyperframes-keyframes
๐ฏSkillfrom heygen-com/hyperframes
|A Claude Code skill that guides the creation of seek-safe 2D/3D keyframe animations for HyperFrames compositions, supporting GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP transitions, SVG morph/draw, motion paths, and 3D depth effects with built-in verification diagnostics.
Overview
HyperFrames Keyframes is a specialized Claude Code skill that provides a structured procedure for authoring seek-safe keyframe animations in HyperFrames compositions. It enforces a strict contract: every animation must name its moving subject, define visible poses, preserve object identity, and produce deterministic, seekable output. The skill covers multiple animation runtimes including GSAP, CSS keyframes, Anime.js, and the Web Animations API (WAAPI), with detailed rules for each to ensure consistent rendering behavior.
Key Features
- Multi-runtime support: Provides specific rules and skeleton code for GSAP timelines, CSS keyframes, Anime.js instances, and WAAPI, each with deterministic construction patterns and registration requirements.
- Mechanism selection guide: Includes a decision table that maps animation needs (FLIP transitions, path travel, stroke drawing, shape morphing, stagger effects, 3D depth, and more) to the right implementation approach.
- Built-in verification workflow: Integrates with HyperFrames CLI tools for linting, validation, ghost overlays, strip layouts, and snapshot proofs to confirm that animations render correctly at every keyframe pose.
- Comprehensive error handling: Documents common failures such as endpoint-only motion, identity breaks, fake 3D, wrong final states, and unseekable runtimes, along with targeted fixes for each.
- Visual channel discipline: Distinguishes compositor-safe channels (transforms, opacity, clip-path, SVG paths, shader uniforms) from layout-triggering channels to prevent rendering issues.
Who is this for?
This skill is designed for developers and motion designers building animated compositions with HyperFrames who need precise, frame-accurate keyframe control. It is particularly useful for teams that require seek-safe animations for video rendering pipelines, developers working with complex multi-runtime animation setups, and anyone who needs deterministic animation behavior that can be verified through automated diagnostic tools.
Same repository
heygen-com/hyperframes(48 items)
Installation
npx vibeindex add heygen-com/hyperframes --skill hyperframes-keyframesnpx skills add heygen-com/hyperframes --skill hyperframes-keyframes~/.claude/skills/hyperframes-keyframes/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.