Enforce motion theses and performance-oriented patterns for web animations.
npx skills add https://github.com/OthmanAdi/gmira --skill gmira-motion
Please help me install this Agent Skill. Skill: gmira-motion Source: https://github.com/OthmanAdi/gmira/tree/main/skills/gmira-motion Command: npx skills add https://github.com/OthmanAdi/gmira --skill gmira-motion
This skill solves the problem of generic, weight-heavy, and meaningless web animations that degrade performance and fail to communicate intent. It prevents the common pitfall of identical section reveals and ensures motion is tied to a clear, authored narrative.
Use the gmira-motion skill to audit the current page animations and ensure they align with the authored motion thesis.
High-intent search queries and answers about installing and using this skill.
To maintain 60fps performance in web animation, enforce frame-rate independent easing and restrict keyframes to compositor-only properties. This approach ensures GPU-efficient rendering while preventing the generic, weight-heavy motion that degrades frontend web performance.
A motion thesis is a defined motion strategy authored before implementation, ensuring every web animation serves a clear narrative purpose. You need this UX design framework when building high-fidelity interfaces requiring intentional scroll reveals and transitions rather than generic motion.
Make scroll reveals and transitions accessible by enforcing strict reduced-motion compliance, providing alternative static states for non-essential animation. This ensures high-fidelity web interfaces remain fully usable for users with reduced motion accessibility settings.
Yes, you can audit existing page animations by evaluating them against an authored motion thesis. This process identifies generic section reveals and meaningless motion, ensuring they align with performance-first guidelines and frame-rate independent easing patterns.
The best way to implement canvas-based effects is by applying performance-first animation guidelines that enforce frame-rate independent easing and GPU-efficient material usage. This prevents meaningless animations from degrading web performance and frame rates.
Frontend animations feel generic when they lack an authored motion thesis to guide implementation. Without a defined motion strategy, section reveals and transitions fail to communicate intent and often degrade performance with weight-heavy, meaningless motion.
ZiadNagarDefine motion tokens, choreography patterns, and reduced-motion support for design systems.
AskTinNguyenImplement cinematic transitions and scroll-driven reveals with GPU-accelerated rendering.
afoveaManage 3D animation playback and skeletal blending in Three.js.
BenjamindaosonAudit and fix animation performance issues in CSS, WAAPI, and JS-driven UI code.
