← ClaudeAtlas

hyperframes-keyframessolid

Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, 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.
ellmos-ai/skills · ★ 6 · AI & Automation · score 84
Install: claude install-skill ellmos-ai/skills
<img src="banner.png" width="100%" alt="hyperframes-keyframes banner"> # 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. ## Procedure 1. Identify the animated subject, visible states, final state, and runtime. 2. Choose the smallest mechanism that proves the prompt. Read `references/keyframe-patterns.md` only if the mechanism is unclear. 3. Author seek-safe keyframes in the declared runtime. Build synchronously and register the runtime instance. 4. Verify with `hyperframes lint`, `hyperframes check`, `hyperframes keyframes`, one focused `--shot`, and snapshots at proof times. 5. If proof fails, fix the source keyframes and rerun the smallest failing diagnostic before rendering. ## Contract - Name the moving subject. - Name the poses needed to prove the intended motion, including the final state. - Keyframe visible channels, not hidden helper state. - Preserve object identity when continuity matters. - Crossfade only when the intended motion is replacement or dissolve. - Hold readable or semantic states long enough to see. - Final frame is part of the animation, not cleanup. - Do not reset to rest unless requested. - Do not end on black unless requested. - If editing a starter scene, preser