motion-design

Apply motion design principles to create UI animations with CSS, Framer Motion, and GSAP.

5|Updated Jan 20, 2026

Search Tags:#ui #animation #choreography #ux #motion #easing

Ready to run

npx skills add https://github.com/mohamedgshoaib/reway --skill motion-design-mohamedgshoaib

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/motion-design
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill motion-design-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent, robotic, or distracting UI animations by providing a structured, design-led framework for creating emotionally resonant and technically sound motion.

Core Features & Use Cases

Motion Personality Archetypes: Choose between Playful, Premium, Corporate, or Energetic styles to ensure brand consistency.
Choreography & Staging: Learn how to coordinate multi-element sequences using the 1/3 rule and stagger budgets.
Use Case: When designing a new dashboard, use this skill to define the signature easing and duration palette for all card entrances, modal transitions, and button feedback, ensuring the interface feels polished and responsive.

Quick Start

Apply the motion-design skill to define the animation timing and easing curves for a new card entrance transition using the Corporate archetype.

Frequently Asked Questions about motion-design

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

FAQPage Schema

How do I create UI animations that feel natural instead of robotic?▼

Natural UI animations require applying Disney animation principles adapted for digital products, using structured easing curves, timing, and choreography to evoke emotional resonance instead of mechanical transitions.

What's the best way to coordinate multi-element entrance animations?▼

Coordinate multi-element entrance animations using choreography and staging techniques like the 1/3 rule and stagger budgets to sequence UI components smoothly and maintain visual focus.

Can I use this motion design framework with Framer Motion and GSAP?▼

Yes, this motion design framework supports creating micro-interactions, page transitions, and scroll-triggered effects across various animation systems including CSS, Framer Motion, and GSAP.

How do I maintain brand consistency across UI motion design?▼

Maintain brand consistency by selecting a motion personality archetype—such as Playful, Premium, Corporate, or Energetic—to define a unified signature easing and duration palette for all interface transitions.

When do I need to define a signature easing and duration palette?▼

You need to define a signature easing and duration palette when designing new interfaces like dashboards to ensure all card entrances, modal transitions, and button feedback feel polished, responsive, and technically sound.