103 UI Micro Interaction Examples (Page 2)

This Playful Multi-Step Interaction transforms a boring confirmation dialog into a delightful conversation. It guides the user through a short “chat” with a friendly avatar, using smooth animations and instant feedback. This pattern is perfect for onboarding flows, feedback forms, or any interface that benefits from a human touch, proving that standard interactions can be both functional and fun.

This Animated Futuristic State Button is more than just a clickable element; it’s a self-contained micro-interaction. Designed for actions like “Generate” or “Processing,” it features a idle flicker animation that transitions into an intense, glowing state upon focus. The text cleverly swaps from a call-to-action to a continuous verb (“Generate” → “Generating”) using purely CSS animations, providing immediate visual feedback without JavaScript.

This Modern CSS Star Rating Component represents a major shift in UI development, moving complex logic from JavaScript to pure CSS. It utilizes the powerful :has() selector to track sibling states, allowing the UI to highlight stars both before and after the interaction point. The stars themselves are created using clip-path instead of bulky SVG icons, resulting in a lightweight, scalable, and highly performant rating system.

This Neon Elastic Stroke Radio Button reimagines the standard form input as a high-energy, futuristic interface element. When selected, two overlapping SVG circles (one pink, one blue) animate around the checkmark area with a satisfying elastic “bounce.” The effect mimics a neon light tube flickering on, enhanced by CSS drop-shadow filters and mix-blend-mode for a vibrant, glowing finish.

Skeuomorphic design meets modern web animation in these Windows XP-inspired power buttons. This component utilizes detailed CSS shadows to create a tactile 3D effect, paired with SVG path manipulation for playful micro-interactions upon interaction.

This 3D Tilt Mobile Navigation concept adds a tactile, physical feel to mobile app menus. Unlike standard flat navigations, this component utilizes CSS perspective to “tilt” the entire menu bar towards the user’s touch point, simulating a floating surface. It pairs this effect with delightful SVG icon micro-interactions and a “fly-out” card transition for the content area, creating a highly polished, app-like experience on the web.

This Merging Pill Filter Button set introduces a fluid, organic feel to standard multi-select inputs. Instead of keeping active items isolated, this component visually fuses adjacent selected buttons into a single continuous shape. It’s an excellent choice for music apps, filtering systems, or any UI where categories are related and grouping them visually adds context.

This Cursor-Tracking Spotlight Reveal Effect creates a sophisticated “x-ray” or “flashlight” interaction. Initially, the user sees plain text. As the mouse moves, a circular mask follows the cursor, revealing a hidden image underneath and simultaneously inverting the text color to white within the circle. This technique adds depth and playfulness to portfolio links or gallery items without disrupting the layout.

This Elastic SVG Morphing Form Controls set redefines standard UI elements by treating them as organic, malleable shapes. Instead of rigid CSS transitions, it utilizes GSAP’s MorphSVGPlugin to physically warp the vector paths of checkboxes, radio buttons, and switches during interaction. The result is a tactile, “gummy” feel where elements squish upon clicking and snap elastically into their active states.

This Interactive CSS Light Bulb Toggle transforms a standard theme switch into a playful interaction. It creates a convincing illusion of a physical pull-cord using standard click events. Rather than using a complex physics engine, it relies on precise timing between mouse/touch events and CSS transforms to mimic the tension and release of a rope when the user clicks the button.

These Animated Feedback Alert Cards provide a high-polish way to communicate application states like success, ongoing processes, and errors. Each card utilizes a cohesive design system of rounded geometry and custom SVG icons that “draw” themselves into existence, offering immediate and delightful tactile feedback to the user.

This Pure CSS Morphing Dark Mode Toggle is a sophisticated implementation of a theme switcher that eliminates the need for JavaScript. By utilizing the modern CSS :has() relational selector and complex transform logic, the component morphs a sun icon into a moon icon seamlessly. It offers a premium feel through the use of custom cubic-bezier timing and modular CSS construction.

This GSAP Sparkle Generate Button adds a touch of magic to standard call-to-action elements. Designed for AI generation tools or creative apps, it features a sophisticated hover effect where particles (dots) spawn and float organically around the button. The animation is driven by GreenSock’s Physics2DPlugin, simulating gravity and velocity for a realistic “dust” movement.

This Micro-Interaction Loading Button demonstrates how to pack multiple feedback states into a single UI element without cluttering the interface. It starts as a clean “Submit” button. Hovering reveals a directional arrow, hinting at action. Clicking triggers a seamless loading sequence where the arrow transforms into a spinner, finally resolving into a checkmark to confirm success.

This Responsive Vue Multiplayer Select component is a playful UI pattern for game interfaces or configuration forms. It utilizes Vue’s reactivity to dynamically calculate the width of game controller illustrations, ensuring they perfectly fill the container regardless of whether 1, 2, 3, or 4 players are selected. The result is a smooth, accordian-like expansion effect.

This Animated Vue Shopping Cart Concept demonstrates how to combine reactive frameworks with imperative animation libraries for a seamless e-commerce experience. The component features a split-screen layout: a product catalog on the left and a dynamic shopping cart on the right. It relies on Vue.js for state management and GSAP for high-performance micro-interactions, specifically morphing the “Add to Cart” button into a checkmark icon upon interaction.

This Gooey Pagination Dot Morph transforms a standard carousel indicator into a delightful liquid micro-interaction. Instead of simply fading or sliding, the active dot behaves like a viscous fluid - stretching (squashing) as it moves and snapping back to a perfect circle upon arrival. It utilizes GSAP’s MorphSVGPlugin to interpolate between different SVG path shapes in real-time.

On hover, the tooltip smoothly grows out from the button. A quick exit reverses this, but a delayed exit triggers a dramatic “drop” animation, spinning downwards as if falling.

A sleek interaction button where the code icon decomposes on hover: brackets slide apart and the slash rotates away, revealing the “Get Code” text. The animation is purely CSS-driven, utilizing calc() with a custom property --intent to interpolate transform values for a fluid, high-performance effect.

A highly stylized range slider utilizing box-shadow on the slider thumb to render the track, masked by a clip-path polygon on the parent container to create a unique slanted aesthetic.

A playful radio button component featuring a “jelly” physics simulation.

A smooth, tactile micro-interface that saves space by hiding sharing options until needed, delighting the user with high-quality animation.

A collection of 10 distinct hamburger menu animations, ranging from simple rotations to complex, multi-stage morphs.

A delightful “High Five” interaction button powered by GSAP and MorphSVGPlugin.

A sophisticated star rating component featuring fractional fills implemented via CSS clip-path. The JavaScript class generates SVG stars and orchestrates a staggered entrance animation, while SCSS keyframes drive complex scale, rotate, and shockwave effects for a tactile, gamified feel.

A lively, responsive interface that turns boring navigation into a playful experience, where every user action is rewarded with delightful visual feedback.

A dynamic modal interaction orchestrated by GSAP timelines, featuring a cascading entry sequence. Upon triggering, the button morphs into the modal container, followed by a staggered reveal of content, imagery, and the close control, utilizing back-easing for a playful, spring-like feel.

This pagination component’s core logic is managed in SCSS, where the .active class (toggled by a minimal JavaScript snippet) triggers a transform: translateX() on a .pagination-current element, creating a fluid “sliding dot” effect. The user experience is further enhanced by a series of polished micro-interactions on the :hover and :active states, which use transform transitions with custom cubic-bezier timing functions to create subtle scaling and “squash and stretch” animations.

XState-powered drag & drop implementation with finite state machine. Features visual state transitions, smooth animations, and contextual feedback.

This animated donut character employs multiple GSAP timelines with elastic easing functions to create independent yet synchronized animations for body sway, facial expressions, and arm gestures.

Experience a fluid micro-interaction built with GSAP, where the animation state is fully reversible for a seamless toggle effect. The distinctive bouncy motion is crafted using the back.inOut(3) ease.

A demonstration of a two-phase menu reveal animation - a fast transform: translateX shift and a slower width expansion are defined in a single transition property, creating a distinct visual effect.

A demonstration of step-by-step CSS transformation to create a cross effect: on :checked, the middle bar either gets opacity: 0 or scales down, while the top and bottom bars simultaneously rotate and translate.

Smooth visual representation of the slider track fill using the CSS clip-path property and the --slider-percentage variable. The tooltip showing the current value is animated with GSAP, including a slight rotation to simulate “wobbling” during drag.

A complex GSAP timeline simulating a cursor controlling a loader. The main feature is the use of .tweenTo(pos) to smoothly transition the loader to a set position within a spinning animation, synchronized with the cursor’s movement.

An advanced “Like” button micro-animation based on CSS @property, where custom variables are used to animate the numbers and the icon.

A complex micro-animation for a tab bar where GSAP keyframes and morphSVG create smooth, “elastic” transitions between icon states, while state management is implemented in vanilla JS.

An animated underline effect for navigation where an SVG path segment smoothly “flows” from one item to another - on click, JS dynamically calculates and sets the stroke-dasharray for the SVG, creating the illusion of movement.

A combination of the ‘checkbox hack’ and 3D transforms to create an interactive neumorphism-style switcher. JavaScript only adds classes, while the entire transform: rotateX() animation and complex box-shadow are controlled by CSS.

This interactive like button uses gsap.timeline() to synchronize a dramatic count transition and a satisfying icon pulse with a large, fading ripple effect applied to the surrounding ring element.

A complex micro-animation using GSAP, where a single click triggers a chain of tweens for asynchronous icon movement and simultaneous container pulsation via the scale property.

An impactful loading icon built on stroke-dashoffset animation for an SVG circle and swinging @keyframes for the icon. A minimalistic jQuery script with setTimeout is used to manage the loading cycle by adding state classes.

Explore the powerful tandem of GSAP and CSS Variables, where to/fromTo with keyframes control SVG elements inside Radio/Checkbox/Switch. The animations utilize the feColorMatrix filter (the “Gooey” effect) and SVG transforms to create smoothly “flowing” shapes and stylish toggles.

This Vue.js component showcases a clean implementation of the “Add to Cart” micro-interaction using reactive data and CSS animation. The main technical feature is the dynamic counter display via a CSS ::before pseudo-element and the count attribute, alongside the “Pop” effect upon update.

This custom radio button UI employs pure CSS @keyframes and transform properties to create a dynamic, liquid-like squash-and-stretch animation upon selection - the smooth UI transition is managed by complex jQuery state logic that precisely adds and removes animation classes.

A sleek, animated segmented control using GSAP for smooth slide and a subtle 3D-like tilt effect on click, providing a polished micro-interaction.

Uses the PIXI.js WebGL renderer to draw dynamic, hardware-accelerated connection lines between content hotspots, enhanced by GSAP for the smooth ‘magnetic’ displacement effect upon mouse hover.

A modern toggle switch animation utilizing pure CSS :checked selector states to drive complex plane take-off/landing @keyframes, augmented by vanilla JavaScript’s Web Animations API (WAAPI) for dynamic smoke particle generation and cleanup.

A technically advanced use of ::before and ::after pseudo-elements to create an arrow. jQuery toggles the .right class, and CSS animates the left and transform: rotate() properties of the pseudo-elements, creating a “switch” or 3D flip effect.

A high-quality, responsive interface with detailed, “alive” icons where every user interaction is met with pleasant visual feedback like a ringing bell or flying feathers.

Creation of a complex icon from three <span> elements that form a “back” arrow in one state and reconfigure into a cross in another state with the .open class. JavaScript is used solely for toggling the state.