skills.rest
shelbeely
shelbeelyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

material-design-3-motion

Implement Material Design 3 motion with CSS and Web Animations API.

4|Updated Feb 16, 2026
Search Tags:#animation#transitions#micro-interactions#motion#m3#haptics#material design 3
One-click install
npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-motion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-motion
Source: https://github.com/shelbeely/Shelbeely-Agent-skills/tree/main/skills/material-design-3-motion
Command: npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps developers implement Material Design 3's expressive and natural motion principles, ensuring animations are intuitive, delightful, and performant.

Core Features & Use Cases

  • Expressive Motion: Apply physics-based spring animations for natural, lively interactions.
  • Animation Types: Implement transitions, micro-interactions (hover, focus, press), and complex animations like stagger and morphing.
  • Use Case: When building a new UI component, use this Skill to apply a spring-based animation to its press state, making it feel responsive and engaging to the user.

Quick Start

Apply a standard Material Design 3 fade-in animation to the element.

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 apply Material Design 3 spring animations to UI components?▼

Material Design 3 motion modes include expressive, standard, and legacy options. These modes define specific duration guidelines and physics-based spring curves to create intuitive transitions across different UI complexities.

How do I add haptic feedback to Material Design 3 micro-interactions?▼

Material Design 3 motion covers transitions, micro-interactions, and complex animations like stagger and morphing. These use CSS and Web Animations API to deliver expressive, performant user experiences.

What are the duration guidelines for Material Design 3 transitions?▼

Duration guidelines for Material Design 3 transitions vary based on motion modes: expressive, standard, or legacy. They specify precise timing intervals to ensure animations feel responsive and intuitive.

Can I use the Web Animations API for Material Design 3 expressive motion?▼

Yes, you can use the Web Animations API alongside CSS to implement Material Design 3 expressive motion. This approach supports physics-based springs and complex morphing animations for engaging UI components.

Related Skills

Explore More Design & Creative Skills→
lxt070409lxt070409
1

sketch

Generate interactive HTML mockups with Tailwind CSS for UI/UX exploration.

Community
Intermediate
segersnielssegersniels

web-animation-design

Guide web animation design with easing, timing, and accessibility support.

Community
Advanced
david-saintdavid-saint

material-design-3

Build Material Design 3 web interfaces with @material/web components and theming tokens.

Community
Advanced
ionmidoriionmidori

m3-expressive-chat-ui

Design chat message bubbles with asymmetric rounding and spring-based animations.

Community
Intermediate