What problem does it solve? Video compositions need deterministic, seek-safe motion—punch-ins, zooms, Ken Burns moves, match cuts, and 3D depth—that renders identically at any timeline position. This Skill provides the contracts, runtime rules, and CLI verification workflow to author keyframes in GSAP, CSS, Anime.js, WAAPI, and WebGL that survive scrubbing and rendering. ## Core Features & Use Cases - Seek-safe runtime contracts: Enforces paused GSAP timelines registered on window.__timelines, finite CSS animations with fill-mode: both, and autoplay: false Anime.js instances pushed to window.__hfAnime. - Mechanism selection guidance: Maps motion needs (path travel, stroke draw, shape morph, FLIP shared elements, clip/mask reveals, text subdivision, 3D camera moves) to the smallest correct implementation via references/keyframe-patterns.md. - CLI proof workflow: Verifies motion with hyperframes lint, check, keyframes, focused --shot ghosts, and time-targeted snapshots, with a diagnostic table for fixing endpoint-only, identity-break, and fake-3D failures. - Use Case: A creator asks for a smooth punch-in on a video clip. The Skill directs authoring a scale/translate keyframe ladder on a wrapper inside the clip, registering the timeline, then proving the motion with a selector-targeted --shot strip and final-frame snapshot. ## Quick Start Use the hyperframes-keyframes skill to add a smooth punch-in zoom to the hero clip in my composition and verify it with the keyframes CLI.
