motion-craft

Provide precise CSS and Motion animation configurations for web UI elements.

16|1|Updated Feb 6, 2026

Search Tags:#frontend #css #animation #spring #motion #easing

Ready to run

npx skills add https://github.com/olzn/ui-craft --skill motion-craft

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-craft
Source: https://github.com/olzn/ui-craft/tree/main/motion-craft
Command: npx skills add https://github.com/olzn/ui-craft --skill motion-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many web interfaces suffer from inconsistent easing, inappropriate durations, and the use of layout‑triggering properties, leading to janky or inaccessible motion.

Core Features & Use Cases

Default easing: cubic‑bezier(0.16, 1, 0.3, 1) for most transitions.
Spring guidance: when to prefer Motion springs over bezier curves.
Duration limits: micro‑interactions ≤150 ms, entrances ≤300 ms, overall ≤400 ms.
Performance recommendations: use only transform, opacity, and filter; avoid layout properties and transition: all.
Scale ranges & transform‑origin: entry scale ≥0.85, press feedback 0.96‑0.98, origin set to trigger element.
Exit patterns: faster and smaller than entrances, with subtle translate.
Patterns: staggered entrances, icon‑swap animations, scroll‑triggered reveals, CSS vs keyframe guidance.
Reduced‑motion handling: respects prefers-reduced-motion with instant fallbacks.
Libraries: Motion, number‑flow, torph, liveline, vaul, sonner.

Quick Start

Ask the motion-craft skill to provide the default easing curve for a button hover transition.

Frequently Asked Questions about motion-craft

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is the best easing curve for CSS button hover transitions?▼

The best easing curve for CSS button hover transitions is cubic-bezier(0.16, 1, 0.3, 1). This default configuration provides smooth motion while ensuring micro-interaction duration limits stay under 150 milliseconds.

How do I fix janky scroll-triggered reveal animations?▼

To fix janky scroll-triggered reveal animations, restrict animations to performant properties like transform, opacity, and filter. Avoid layout-triggering properties and transition: all to maintain smooth rendering and conform to accessibility guidelines.

When should I use Motion spring animations instead of CSS bezier curves?▼

You should use Motion spring animations instead of CSS bezier curves for dynamic UI elements like modal entrances. Spring guidance recommends springs when motion requires physics-based responsiveness rather than fixed duration or easing curve limits.

Does this animation approach support prefers-reduced-motion accessibility settings?▼

Yes, this approach fully supports prefers-reduced-motion accessibility settings. It respects user preferences by providing instant fallbacks, ensuring UI animations conform to reduced-motion guidelines without breaking interface functionality.

How do I animate modal entrance and exit patterns correctly?▼

Animate modal entrances with a scale range above 0.85 and duration under 300 milliseconds. Exit patterns should be faster and smaller than entrances, using subtle translate transforms with the transform-origin set to the trigger element.

Why does using transition: all cause janky web interface motion?▼

Using transition: all causes janky web interface motion because it inadvertently animates layout-triggering properties. Performance recommendations dictate using only transform, opacity, and filter to ensure smooth rendering during UI transitions.