Learning goal

To define base durations (150–300ms) and easing curves, and to write state rules (hover, focus, active, success, error) that tie motion to the VIS (restrained vs playful).

Who

Designers
Front-end developers
Back-end developers
UX researchers

What

Understand the importance of motion in supporting meaning, not noise.

Where

In web applications, mobile apps, and desktop software.

When

When users interact with elements (e.g., hover, focus, active states).

Why it matters

Without feedback, users feel unsure.

How

Define base durations (150–300ms) and easing curves to ensure smooth transitions.
Write state rules (hover, focus, active, success, error) to provide clear visual cues.
Tie motion to the VIS (restrained vs playful) to enhance user experience.

Guided Exercise (10–15 minutes)

Create motion tokens (duration.xs/sm/md, easing.standard/enter/exit).
Define state rules for CTA (hover/focus/active) and card.
Add success/error feedback example (icon + color + motion).

Independent Exercise (5–10 minutes)

Implement one component (CTA) with these rules; record a short clip/gif.

Self-Check

Duration and easing table exists.
State rules documented.
Good/bad example exists.
Accessibility (prefers-reduced-motion) handled.

Bibliography (sources used)

Material Motion: https://m3.material.io/styles/motion/overview
Prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

Optional Deepening

Read more about Material Motion and prefers-reduced-motion for a deeper understanding.

Current Status

The lesson is now complete and ready for review.

Next Steps

Review the lesson and provide feedback.
Implement the motion and feedback rules in your project.
Test and iterate to ensure a smooth user experience.

Additional Resources

Material Design Guidelines: https://material.io/design/
Web Accessibility Initiative: https://www.w3.org/WAI/
Mozilla Developer Network: https://developer.mozilla.org/en-US/

Motion and Feedback Language