interaction-design

Microinteractions, motion design, and state transitions that enhance UI polish and user feedback.

- Covers timing guidelines (100ms to 500ms+), easing functions, and purposeful motion principles for feedback, orientation, and focus

- Includes patterns for loading states, skeleton screens, progress indicators, toggles, page transitions, ripple effects, and swipe gestures

- Provides CSS keyframe animations and transition examples alongside Framer Motion implementations for React

- Built-in accessibility support with prefers-reduced-motion detection and guidance on performance optimization using transform and opacity

Interaction Design

Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.

When to Use This Skill

- Adding microinteractions to enhance user feedback

- Implementing smooth page and component transitions

- Designing loading states and skeleton screens

- Creating gesture-based interactions

- Building notification and toast systems

- Implementing drag-and-drop interfaces

- Adding scroll-triggered animations

- Designing hover and focus states

Core Principles

1. Purposeful Motion