material-design-3-motion
Material Design 3 Motion and Animation
Overview
This skill guides the implementation of Material Design 3 (M3) Expressive motion principles to create springy, natural-feeling animations that enhance usability and delight users.
Keywords: Material Design 3, M3, motion, animation, transitions, micro-interactions, easing, duration, spring physics, expressive motion, haptics, physics-based animation
Core Principles
Expressive Motion Philosophy
M3 Expressive motion is designed to feel alive, natural, and responsive:
- Physics-Based Springs: Use spring-based animations governed by stiffness, damping, and velocity — replacing traditional cubic-bezier easing for more natural, lively motion
- Purposeful Motion: Every animation should serve a purpose—guiding attention, providing feedback, or showing relationships
- Responsive Feel: Motion responds to user input with appropriate speed and timing
- Spatial Coherence: Elements move in ways that respect spatial relationships and physics
- Haptic Integration: Pair spring animations with platform-native haptic feedback for tactile reinforcement
More from shelbeely/shelbeely-agent-skills
material-design-3-guide
Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.
30material-design-3-components
Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.
30material-design-3-layout
Applies Material Design 3 Expressive layout, spacing, and size hierarchy principles including grid systems, responsive design, and elevation. Use this when working on page layouts, spacing, grids, responsive design, or when the user asks to apply Material Design 3 layout guidelines.
22material-design-3-typography
Applies Material Design 3 Expressive typography principles including variable fonts, type scales, and hierarchy. Use this when working on text styling, type hierarchy, readable interfaces, or when the user asks to apply Material Design 3 typography guidelines.
22material-design-3-color
Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.
18material-design-3-shape
Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.
17