hyperframes-keyframes

Solid

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.

AI & Automation 4 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
23
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

<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...

Details

Author
ellmos-ai
Repository
ellmos-ai/skills
Created
6 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Listed

hyperframes-keyframes

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.

1 Updated 1 months ago
jpratt9
Web & Frontend Listed

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

1 Updated 1 months ago
jpratt9
Web & Frontend Solid

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

4 Updated today
ellmos-ai