interaction-physics

Design and audit microinteractions for UI elements with timing, easing, and accessibility.

29|6|Updated Jan 16, 2026

Search Tags:#design #performance #accessibility #timing #UI animation #microinteractions #easing

Ready to run

npx skills add https://github.com/sanky369/vibe-building-skills --skill interaction-physics

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: interaction-physics
Source: https://github.com/sanky369/vibe-building-skills/tree/main/skills/frontend-design/interaction-physics
Command: npx skills add https://github.com/sanky369/vibe-building-skills --skill interaction-physics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps product teams design and audit microinteractions in user interfaces, ensuring feedback is purposeful and accessible.

Core Features & Use Cases

Design and audit microinteractions for common UI elements (buttons, inputs, cards, modals).
Establish timing, easing, and state transitions to improve perceived performance.
Ensure accessibility and performance considerations are integrated in the design process.

Quick Start

Use the interaction-physics skill to design microinteractions for a button hover, focus, active, and loading states, ensuring feedback is clear and accessible.

Frequently Asked Questions about interaction-physics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design microinteractions for button states to improve user feedback?▼

Microinteractions for buttons use timing, easing, and state transitions (hover, focus, active, loading) to provide clear visual feedback. Define each state's duration and easing curve to balance perceived performance with accessibility, ensuring feedback remains noticeable for all users.

What's the best way to ensure UI animations are accessible and performant?▼

Accessible animations respect motion preferences, use sufficient contrast and duration for clarity, and avoid flashing. Performance-optimized animations leverage GPU acceleration, reduce repaints, and keep frame rates smooth—critical for mobile and web apps where timing and easing directly affect both experience and usability.

Can I audit existing microinteractions in my app for timing and accessibility?▼

Yes. Microinteraction audits examine button states, form feedback, loading indicators, notifications, and page transitions against timing standards, easing consistency, state clarity, and accessibility requirements, identifying gaps in feedback intentionality across web and mobile interfaces.

How do I establish consistent easing and timing across form inputs and notifications?▼

Define a timing system—duration for each interaction type (form feedback, notifications)—and select easing curves that match intent: ease-out for entrances, ease-in for exits. Apply consistently to inputs, cards, modals, and notifications so users develop reliable expectations for interaction response.

What's the difference between designing microinteractions for perceived performance versus actual performance?▼

Perceived performance uses timing and easing to make actions feel faster or more responsive—loading spinners, state transitions—without changing actual speed. Actual performance optimizes rendering. Together, they create smooth, intentional feedback that reduces user friction and improves confidence in the interface.

Do microinteraction design principles apply to both web and mobile apps?▼

Yes. Button states, form feedback, loading indicators, and page transitions follow the same principles—timing, easing, state changes, accessibility—across platforms. Mobile requires attention to touch feedback and reduced animation duration; web benefits from hover states. Both need performance optimization and accessible motion.