skills.rest
pohlai88
pohlai88COMMUNITY
Explore all skills by this author →
GitHub

material-design-3-motion

Implements Material Design 3 Expressive motion principles for CSS and JavaScript animations.

Updated Sep 5, 2026
Search Tags:#accessibility#animation#micro-interactions#material design 3#spring physics#css transitions#motion tokens
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-design-3-motion-pohlai88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-motion
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/material-design-3-motion
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-design-3-motion-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing animations that feel natural and consistent with Material Design 3 guidelines is difficult, especially when choosing between spring physics, easing curves, durations, and accessibility requirements. ## Core Features & Use Cases - Spring-Based Motion Guidance: Provides expressive and standard spring parameters (stiffness, damping, velocity) with CSS cubic-bezier and linear() approximations plus Web Animations API examples. - Ready-to-Use Patterns: Ships an examples/motion-patterns.css file with fade, scale, slide, shared axis, state layer, elevation, and theme transition keyframes using M3 motion tokens. - Accessibility & Haptics: Covers prefers-reduced-motion handling, haptic feedback coordination, and a full implementation checklist. - Use Case: When building a bottom sheet or dialog in a Next.js app, apply the slide-up keyframes and expressive easing tokens so the entrance animation matches M3 Expressive guidelines. ## Quick Start Apply Material Design 3 motion guidelines to animate my dialog component with an expressive spring entrance transition.

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 animations in CSS?▼

Use M3 motion tokens with cubic-bezier easing curves like cubic-bezier(0.05, 0.7, 0.1, 1.0) for expressive motion and cubic-bezier(0.2, 0.0, 0, 1.0) for standard motion. Pair them with duration tokens ranging from 50ms to 600ms based on element size.

What is the difference between expressive and standard motion in Material Design 3?▼

Expressive motion uses high stiffness and medium damping for pronounced overshoot and bounce, suited for user-triggered interactions. Standard motion uses medium stiffness and high damping for minimal bounce, suited for utilitarian flows like page transitions.

How do I handle prefers-reduced-motion in web animations?▼

Wrap animations in a media query that sets animation-duration and transition-duration to 0.01ms when prefers-reduced-motion is reduce. This ensures users with motion sensitivity preferences receive near-instant state changes.

Which CSS properties should I animate for better performance?▼

Animate only transform and opacity, which are GPU-accelerated. Avoid animating width, height, top, or left because they trigger layout reflow and degrade performance, especially on mobile and low-end devices.

Can I add haptic feedback to web animations?▼

Yes, use navigator.vibrate() to trigger short haptic pulses coordinated with spring animations at key moments like overshoot or completion. Always respect user haptic settings and provide accessibility options.

Related Skills

Explore More Design & Creative Skills→
shelbeelyshelbeely
4

m3-web-vanilla

Implement Material Design 3 styling with vanilla CSS custom properties and semantic classes.

Community
Basic
sabiscoresabiscore
1

motion-performance-architect

Defines motion budgets, compositor-only property rules, and reduced-motion contracts for animation-heavy frontends.

Community
Intermediate
EmasoftEmasoft

amw-material-3

Applies Material Design 3 tokens for color, shape, type, elevation, and state layers to web UI.

Community
Advanced
langgeniuslanggenius

to-spring-or-not-to-spring

Audit animation code for correct timing function selection and output file:line findings.

Official
Intermediate