motion-craft

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.