skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

motion-design

Applies motion design principles to create UI animations, transitions, and micro-interactions.

Updated Jul 20, 2026
Search Tags:#ui#animation#choreography#transitions#micro-interactions#motion design#easing
One-click install
npx skills add https://github.com/Jatinkrmahato993203/crime --skill motion-design-jatinkrmahato993203
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/Jatinkrmahato993203/crime/tree/main/skills/motion-design
Command: npx skills add https://github.com/Jatinkrmahato993203/crime --skill motion-design-jatinkrmahato993203

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating UI animations that feel intentional rather than robotic requires consistent decisions about timing, easing, choreography, and emotional tone, which most teams handle ad hoc. This Skill provides a structured framework of duration tables, easing curves, personality archetypes, and Disney animation principles adapted for interface motion. ## Core Features & Use Cases - Timing and Easing Guidance: Provides duration tables by element type, directional easing rules, and industry-standard cubic-bezier values for CSS, Framer Motion, GSAP, Lottie, and spring-based systems. - Motion Personality System: Defines four archetypes (Playful, Premium, Corporate, Energetic) with signature easings, duration palettes, and entrance patterns for consistent brand motion identity. - Choreography and Patterns: Supplies ready-made recipes for entrances, exits, state feedback, loading states, stagger sequences, and ambient continuous motion. - Use Case: When building a dashboard, use this Skill to design a coordinated load sequence where the hero metric enters first, supporting cards stagger in under 500ms, and a subtle ambient pulse signals the primary KPI. ## Quick Start Use the motion-design skill to create a playful button press animation with anticipation, squash and stretch, and a spring settle for my React app.

Frequently Asked Questions about motion-design

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

FAQPage Schema
How do I choose the right animation duration for UI elements?▼

Match duration to element type: tooltips need 80-120ms, buttons 120-180ms, cards 200-350ms, modals 300-400ms, and page transitions 400-600ms. Scale duration by distance, where 200px of travel multiplies the base by 1.3x.

What easing should I use for entrance and exit animations?▼

Entrances use ease-out curves that decelerate into place, while exits use ease-in curves that accelerate away and run at 65-75% of entrance duration. On-screen movement uses ease-in-out, and looping ambient motion uses sine-based easing.

Does this motion guidance work with Framer Motion and GSAP?▼

Yes, the principles are framework-agnostic and apply to CSS, Framer Motion, GSAP, Lottie, and spring-based systems. The cubic-bezier values, spring stiffness and damping parameters, and timing tables translate directly into any animation library.

How do I make animations accessible for reduced motion preferences?▼

For prefers-reduced-motion, replace spatial movement with opacity fades, remove spring easing, cut durations by 50% or more, and never auto-play loops. Avoid vestibular triggers like large zooms, spinning elements over 100px, and multi-layer parallax.

Why does my UI animation look robotic or feel flat?▼

Robotic motion usually comes from linear easing on spatial movement, straight paths, or synchronized timing. Add ease-out curves, 10-20px arc offsets, staggered starts of 50-100ms, and secondary layers like shadow motion to fix flatness.

What are the performance limits for web animations?▼

Animate only transform and opacity for GPU acceleration, keep under 20 animated elements per viewport, and target 60fps. Avoid animating width, height, margin, or box-shadow, and stagger elements instead of running them simultaneously.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

brand-visual-language

Define cohesive border-radius, typography, and iconography systems for brand consistency.

Official
Intermediate
ayofemiadeayofemiade

animation-designer

Creates web animations, transitions, and micro-interactions using Framer Motion and CSS.

Community
Intermediate
dinoudondinoudon

animation-design

Create animations with Framer Motion, CSS, and GSAP.

Community
Advanced
trungenglishtrungenglish
1

apple-design

Implements Apple-style fluid interfaces with spring animations, gesture tracking, and translucent materials for the web.

Community
Intermediate