Agent skill · software engineering · heygen-com
hyperframes-keyframes
Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video planning.
Why this skill is useful
Provides specific GSAP and Anime.js keyframe patterns and diagnostics that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-07. 39,818 stars on the source repository.
What this skill does
HyperFrames Keyframes Keyframes are a pose contract: visible states, continuous subject identity, seek-safe runtime, verified pixels. Use hyperframes-animation for broad scene recipes. Use hyperframes-cli for full command docs. Use references/keyframe-patterns.md only when choosing implementation mechanisms, not visual style. Creator editing boundary Keyframes own visual motion, not clip assembly. Source-range hard cuts, trim, splice, and reorder belong to /hyperframes-core: author one media element per kept range, place it with data-start and data-duration, and select its source offset with data-media-start. Adjacent ranges make a hard cut. A crossfade uses overlapping clips on different tracks plus visual opacity keyframes; sound fades use /hyperframes-audio. Creator request Truthful mechanism --------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Punch-in / punch-out Keyframe scale with x/y or percentage translation on a non-timed visual/crop wrapper inside the clip. Use a set/short tween for a hard punch and a tween for a smooth move. Smooth multi-state zoom or reframe Keep one subject wrapper alive and author multiple zoom/reframe states as a pose ladder with per-segment easing. Pan, reframe, or Ken Burns camera move Animate wrapper translation plus scale. Geometry is authored; this is not face tracking or automatic semantic reframing. Chained camera moves Chain labeled transform beats on one registered seek-safe timeline. Match cut or whip pan /hyperframes-animation owns the visual handoff; /hyperframes-registry supplies primitives; keyframes preserve authored geometry, direction, and velocity. There is no automatic matching-frame discovery. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills heygen-com/hyperframes-keyframes