material-design-3-motion

Implement Material Design 3 expressive motion with spring-based parameters and motion tokens.

Updated Nov 24, 2021
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-motion-ishiyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-motion
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/material-design-3-motion
Command: npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-motion-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Material Design 3 Expressive Motion enables developers and designers to create natural, engaging UI animations by applying physics-based spring dynamics, improving perceived responsiveness and user delight.

Core Features & Use Cases

  • Expressive motion philosophy, including physics-based springs, purposeful motion, and haptic integration to enhance usability.
  • Motion modes and tokens: expressive, standard, and tokenized easing to ensure consistency across platforms.
  • Practical patterns for transitions, micro-interactions, and complex animations (e.g., container transforms, shared axis, ripples) with accessibility considerations.

Quick Start

Apply expressive Material Design 3 spring motion to a button click using a medium bounce and a 300ms duration.

Frequently Asked Questions about material-design-3-motion

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

FAQPage Schema
How do I implement Material Design 3 expressive motion for UI animations?▼

Material Design 3 expressive motion is implemented using physics-based spring dynamics to create natural UI animations. You apply motion tokens and spring parameters like stiffness, damping, and initial velocity to transitions and micro-interactions.

What is the difference between standard and expressive motion modes in MD3?▼

Expressive motion modes in MD3 utilize physics-based springs for natural, engaging animations, whereas standard modes rely on tokenized easing. Expressive motion specifically improves perceived responsiveness and user delight through dynamic feedback.

How do I configure spring physics parameters for MD3 button click feedback?▼

To configure spring physics for button feedback, apply MD3 motion tokens using a medium bounce and a 300ms duration. This involves setting specific stiffness, damping, and initial velocity values to achieve natural micro-interactions.

Does Material Design 3 motion support reduced-motion accessibility requirements?▼

Yes, Material Design 3 motion implementation includes accessibility considerations for reduced-motion respect. This ensures UI animations and transitions adapt appropriately for users who prefer minimized or disabled motion effects.

Can I use MD3 motion tokens for container transforms and shared axis transitions?▼

Yes, MD3 motion tokens can be applied to practical patterns including container transforms, shared axis transitions, and ripples. These tokens ensure consistent physics-based animation behavior across web and mobile apps.

How do haptics integrate with Material Design 3 expressive motion?▼

Haptic integration in Material Design 3 expressive motion provides optional tactile feedback to enhance usability. It works alongside physics-based springs and micro-interactions to deliver a more engaging and responsive user experience.