
from hyperframes13,943
Patterns and contract for authoring CSS keyframe animations that HyperFrames can deterministically seek and render during preview and video export.
Provides practical patterns and adapter guidance for using CSS keyframe animations with the HyperFrames runtime. It explains the contract required for seekable CSS motion (data-start/data-duration), recommends finite durations and fill modes, and shows basic and staggered patterns with code samples so agents can generate renderable HTML/CSS that HyperFrames will control deterministically.
Use this skill when a motion belongs to a single element or decorative layer (shimmers, glows, masks, simple entrances) and you want a lightweight, CSS-only solution instead of a full JS timeline. Prefer it for repeated motifs with known iteration counts or background motion not tied to user events. Avoid when choreography requires many elements or interactive triggers.
npx hyperframes lint, npx hyperframes validate).Best for code-focused agents that can author HTML/CSS snippets and run simple validation (Copilot/Code agents, Cursor, Gemini Code). Agents that output HTML templates for rendering pipelines will benefit most.
This skill has not been reviewed by our automated audit pipeline yet.