Provide precise CSS and Motion animation configurations for web UI elements.
npx skills add https://github.com/olzn/ui-craft --skill motion-craft
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
Many web interfaces suffer from inconsistent easing, inappropriate durations, and the use of layout‑triggering properties, leading to janky or inaccessible motion.
transition: all.prefers-reduced-motion with instant fallbacks.Ask the motion-craft skill to provide the default easing curve for a button hover transition.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
rattamnoonEnforce transform and opacity motion rules to reduce UI animation jank.
sgcarstrendsImplement scroll-triggered and entrance animations with Framer Motion variants and TypeScript typings.
pproencaGuide web animation best practices for easing, timing, and transform optimization.
zengxiaoqiCreate and manage CSS keyframe animations with controlled timing and iteration settings.