Micro Interaction Library
By Shuvra


UI micro interactions created with
Figma + After Effects + Lottie

Expanding Toolbar Micro-interaction

Icons keep the UI minimal, while labels reveal themselves only when needed. A small interaction that balances clarity and space.

Password Validation Micro-interaction

Exploring a small real-time password validation micro-interaction.Small interaction, better usability.

Payment confirmation Micro-interaction

A simple transition from “Pay Now” to “Paid”, using motion to visualize the transaction. Small details like this help make digital payments feel more reassuring.

Folder Toggle Micro-interaction

A folder upload micro-interaction demonstrating state change and visual feedback.

The folder icon toggles between add and remove states while animating the file movement.

Like button Micro-interaction

A heart toggle with a small burst animation to reinforce the interaction.

Sequential Loader Micro-interaction

A micro-interaction using progressive color transitions across multiple elements to signal loading while maintaining a calm and aesthetic motion.

Drag-and-drop image upload Micro-interaction

The upload area reacts to the drop, icons animate to indicate activity, and a progress bar shows the upload moving from 0% to completion.

CTA button Micro-interaction

Directional motion on hover, and subtle feedback on click to reinforce the action.

Loading State Micro-interaction

Instead of a static loader, adding staged messages to guide users through the process.

QR Code Share Micro-interaction

A QR code share micro-interaction that transforms a simple CTA into an expandable panel.

Menu Toggle Micro-interaction

A floating action button (FAB) micro-interaction that transitions into an active state through shape morphing and icon transformation.

The interaction provides a clear visual cue while maintaining a lightweight and modern feel.

Create a free website with Framer, the website builder loved by startups, designers and agencies.