motion-design

Name: motion-design
Availability: InStock
Author: yonetim258852

Define UI motion systems with timing, easing, and layered animation patterns.

Updated May 24, 2026

Search Tags:#pattern #interaction #timing #motion-design #easing #ui-animation

Ready to run

npx skills add https://github.com/yonetim258852/ozgur-os --skill motion-design-yonetim258852

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/motion-design
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill motion-design-yonetim258852

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI motion often lacks consistency, personality, and clear storytelling, leading to distracting or wasted interactions.

Core Features & Use Cases

A three-pillar framework: Emotional Intent, Visual Narrative, and Motion Craft to guide every animation.
Three motion layers: Primary (focus), Secondary (support), Ambient (life) to create depth without clutter.
Patterns and decision framework for entrances, exits, feedback, loading, and ambient motion, aligned with Disney principles.
Comprehensive references and a catalog of patterns for scalable design systems.
Real-world examples include button presses, card entrances, and page transitions with brand-consistent timing and easing.

Quick Start

Execute the motion-design skill to establish a cohesive motion system across a product's UI.

Frequently Asked Questions about motion-design

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

FAQPage Schema

How do I create consistent UI animation patterns for a design system?▼

Create consistent UI animation by applying a three-pillar framework covering emotional intent, visual narrative, and motion craft. This establishes standardized timing, easing conventions, and motion layers for entrances, exits, and feedback across your product.

What is the best way to structure micro-interactions and page transitions?▼

Structure micro-interactions and page transitions using three motion layers: primary for focus, secondary for support, and ambient for life. This layered approach creates visual depth without clutter, adapting Disney animation principles to UI components.

Can I apply these motion design principles using Framer Motion, GSAP, or Lottie?▼

Yes, these motion design principles apply universally across CSS, Framer Motion, GSAP, and Lottie. The framework provides brand-consistent timing and easing conventions rather than library-specific code, ensuring scalable UI animation patterns.

Why does my UI animation feel distracting or lack personality?▼

UI animation feels distracting when it lacks clear storytelling and principled motion design. Without a structured framework for emotional intent and visual narrative, interactions become inconsistent, leading to wasted motion that obscures rather than enhances the user experience.

When should I use ambient motion versus primary motion in UI components?▼

Use primary motion to direct user focus for entrances and exits, and ambient motion to add background life. Secondary motion supports the primary action, ensuring cohesive visual depth without overwhelming the interface with competing animations.

Does the motion-design framework provide catalog references for loading states?▼

Yes, the framework includes a comprehensive catalog of pattern references for loading states, button presses, and card entrances. These patterns align with Disney principles to deliver scalable, brand-consistent motion across your design system.