What problem does it solve? Animations in HyperFrames video compositions often break during seeking, lose subject identity, or end on wrong final frames. This Skill provides a pose-contract workflow for authoring deterministic, seek-safe keyframes across GSAP, CSS, Anime.js, WAAPI, and WebGL runtimes, then verifying them with CLI diagnostics. ## Core Features & Use Cases - Seek-safe runtime authoring: Build paused GSAP timelines registered on window.__timelines, finite CSS keyframes with animation-fill-mode: both, and Anime.js instances pushed to window.__hfAnime, avoiding timers, Date.now(), and unseeded randomness. - Mechanism selection guidance: Choose the smallest mechanism that proves the motion, such as FLIP shared elements, path travel, stroke draw, shape morphing, clip/mask reveals, staggers, text subdivision, DOM 3D, or shader uniforms, using references/keyframe-patterns.md. - CLI verification workflow: Run hyperframes lint, check, keyframes, focused --shot captures, --ghost for canvas/WebGL, and snapshot --at to prove first frame, proof poses, and exact final state. - Use Case: Animate a logo that travels a curved path, resolves into a final lockup, and verify with npx hyperframes keyframes . --selector ".logo" --shot proof.png plus snapshots at proof times to confirm identity and final hold. ## Quick Start Use the hyperframes-keyframes skill to author a seek-safe GSAP keyframe animation for my composition and verify it with the HyperFrames CLI diagnostics.
