Memorables

Micro-interactions

Micro-interactions that make a product feel alive: buttons, toggles, sliders and inputs.

A micro-interaction is a single small moment in an interface: pressing a button, flipping a toggle, dragging a slider, ticking a checkbox. It has a trigger, a response and a piece of feedback, and when it is done well the whole product feels more solid and more human. This page collects buttons, toggles, sliders, inputs and menus that answer with care, prototyped in SwiftUI, CSS and Framer. Watch them for their timing and their springs, and for how they confirm an action without getting in the way.

55 works by 47 creators, newest added 11 November 2026. Each is credited to the people who made it and links to the original.

All 55 Micro-interactions

  1. Agentation Layout Mode by Benji Taylor — Layout Mode for Agentation, a creative tool for wireframing directly on the page: move, resize and add components, and the changes become structured design feedback for a coding agent.
  2. Liquid Arrow Button by Kopp — A gooey hover effect for a button, where metaballs let the arrow end pinch off into its own circle and melt back in, one of the copy-paste components of an interaction code library.
  3. Imagine Comments by Andrey Rybin — An iOS micro-interaction prototype for comments, where a long-press offers Imagine and turns each reply into pictures, built with AI from a description of how it should feel.
  4. Animated UI Controls by Gustavo Rodrigues — Animated UI controls for forms, a radio button, a checkbox and a toggle that each answer a click with their own motion, as the camera glides from one to the next like a product film.
  5. Film Develop Upload by Yanis Lebzar — A file upload interaction for a personal CMS, built with motion.dev and Three.js shaders, where a dropped cover photo develops from black and white into colour like a film print.
  6. Feedback Slider by Salung Prastyo — A feedback slider UI component that asks How did it feel? and answers with emotion, a glossy 3D emoji face going from worried to beaming as you drag the knob to the right.
  7. Ampersands, Handles and Weights by Kostya Farber — A variable font study of an ampersand that keeps its points and Bézier handles in view as the weight runs from 200 to 800, showing how one outline drives every weight.
  8. Hold to Delete by Keshav Bagaade — A hold to delete button for account deletion that makes the moment literally hot, the page catching fire from the button and burning through to a screen saying the account is gone.
  9. Nav Experiment 2.0 by Abhishek Bariya — A mobile navigation experiment where a round corner button fans out its menu along the curve of the phone screen, then folds back into the chosen icon and retints the screen.
  10. Reshaping Dock by Matt Ölschlegel — A dock navigation component for Framer that reshapes around its icons, the grey shape bulging like a droplet as the hovered well swells into a white disc and names itself.
  11. Metal Toggles by Benjamin den Boer — A 3D render of toggle switches as objects, the on and off states cast as shallow tins of brushed silver and dark gunmetal, a skeuomorphic take on the most common UI component.
  12. Stageshow by Benji Taylor — An agent skill that teaches coding agents to make faux product UI, from feature cards to cursor demos, shown here as a bento grid of switches, sliders and charts all working at once.
  13. Pick Your Vibe by Timeless — A mood picker micro-interaction for a places app, a glowing orb on the map that you drag round to Date, Friends, Work or Solo, turning a filter into a gesture that feels like play.
  14. Weather Scrubber by Praneeth Jonnala — A SwiftUI weather app with Metal shaders and haptics, where dragging a time scrubber repaints the whole screen hour by hour, from afternoon sun to rain on the glass and a lightning storm.
  15. Halloween Ghost by Nicolas Jesenberger — A Halloween drag interaction where you dress a peeking character yourself, pulling a dripping sheet over its head until it comes alive as a ghost that blinks, squints and smiles.
  16. Finny Gen Z Mobile Bank by Alex Herasov — A Gen Z mobile bank app where money becomes a puffy 3D icon, the dollar sign inflating as a ruler slider raises a savings goal, so saving feels closer to a game than a form.
  17. Liquid Glass Bubble Components by Cristian Javier — Open-source liquid glass UI components in light mode, a toggle, buttons and a slider treated as soap bubbles, so every press makes the glass swell, stretch or pop like the real thing.
  18. Vercel Halloween Logo by Vercel — A Halloween easter egg in the vercel.com header, a hover logo animation where the triangle turns into a costumed 3D browser window, a ghost, a devil or a bat, a new one at each pass.
  19. BLOND Website Toggles by BLOND — The new website of an industrial design studio, built with Alright Studio around one top-centred toggle that sets how deep you dig, from Selected work down to prototypes and CAD.
  20. Fold Toolbar by Malay Patel — A toolbar micro-interaction for a drawing tool where tool groups unfold in place instead of opening a menu, then fold back with the chosen shape or pen as the new icon.
  21. macOS Folder Icon Timeline by Raul Dronca — An interactive timeline of the macOS folder icon from 1984 to 2026, where dragging one scrubber morphs a single folder through every era, from 1-bit pixels to Aqua and today’s flat blue.
  22. Infinite FAQ by Gustavo Fior — An infinite FAQ component for Foglamp, where the last row is a field that asks the AI assistant Foggy anything and its answer opens in the list like any other question.
  23. Aging Button by Florian Kiem — A button micro-interaction for a UI that ages with use, where every click leaves wear on a blue Save button until smudges and chipped paint make it look like a worn physical key.
  24. Boarding Pass Scanner by Mike Barton — A skeuomorphic drag interaction where a boarding pass is swiped through a scanner of lovely aged plastic, its little screen running from READY through ERROR before letting you in.
  25. Shape-Shifting Controls by Kevin Dukkon — A design system of UI controls that share one DNA, so a checkbox, toggle, stepper, segmented control, slider and chips feel like a single shape changing on the same tokens.
  26. Elastic Volume Slider by Gabriel Obholz — A volume slider micro-interaction with spring animation, where the thumb turns into an orange value drop and the track bends like a plucked string, then springs back flat.
  27. Siri AI Button by Apple — The Siri AI text field from Apple, a glassy pill whose rainbow rim shifts from warm to cool as it types the assistant’s 2026 launch line, a button that glows as if listening.
  28. Status Bar States by Mobin Amiri — An iOS concept imagining new states for the iPhone status bar and Dynamic Island, where battery, Wi-Fi and signal fold into a single ring gauge while a timer splits off.
  29. Crumpled Receipt by Lorenzo Cabra — An interactive UI component for Bencho, where a till receipt crumples into a paper ball at a click and can be tossed into a bin, skeuomorphic physics for a throwaway gesture.
  30. Tear-off Ticket by Lorenzo Cabra — A drag interaction for a boarding pass UI component, where the seat stub really tears off along its perforation, swinging on the cursor with a ragged edge before the ticket resets.
  31. Animated Interface Icons by James McDonald — Animated interface icons drawn for a new product UI, 28 rounded line icons that each get a small motion of their own, from the designer who drew Raycast’s icon set.
  32. Timer Widget by Sasha Birukoff — A timer UI component built on a dot matrix, where a round grid of red dots turns a step with each second beside the digits, a tiny clock whose pattern does the counting.
  33. Feedback You Can Pick Up by Alim Joldaspayev — A chat interface micro-interaction for client feedback, where the words of a request are picked up one by one from the message and dropped into the reply as a quote.
  34. Shrinking Scroll Text by Shawn — A scroll animation for reading interfaces, where each paragraph scales down and blurs as it leaves the view, a small detail that makes long text feel lighter to read.
  35. Liquid Storage by Alim Joldaspayev — A storage widget UI component in dark mode where each file type is a coloured liquid in one tube, so hovering a band makes it bulge and cleaning the cache visibly drains it.
  36. Image Compressor by Gabriel Obholz — An image compressor UI that takes the word literally: the file is fed through a skeuomorphic desktop machine and squeezed like paper in a press before it is ready to download.
  37. Realistic Button by Adam Kowalski — A skeuomorphic button UI component that remembers being touched: each click sinks it a little and leaves a fingerprint, until the label is smudged with overlapping prints.
  38. Click but Spiderman by Özer Gökalpsezer — A playful click micro-interaction where a Spider-Man hand cursor shoots a web that sticks to the button, stretches and snaps, the half-second after a click turned into a gag.
  39. LookAway Orb by Kushagra Agarwal — A liquid glass UI animation for LookAway, a Mac app for screen breaks and posture, borrowing from the Siri orb and Apple Music’s ripples to rise from the dock as a soft bubble.
  40. Book a Liquid Call by Val Guerra — A liquid hover effect for a Book a call button, built on metaballs so the pill bulges toward the cursor like a drop of water, then snaps back with a soft pink and blue glow.
  41. Buttons with Feelings by Sasha Balandina — A button micro-interaction that gives every change of state a mood, from Copy to Published, each with its own colour and a tiny kaomoji face, so Like ends in a blushing Liked.
  42. Ruler Picker by Nitish Khagwal — A ruler picker slider whose ticks swell under the cursor like a magnifier while the digits on its pin roll to each new value, making a plain number input feel physical.
  43. Splitting Actions by Nitish Khagwal — A button micro-interaction for a payments screen where Pay and Request split into the next choices instead of opening a menu, keeping the decision right under your finger.
  44. Grok Bot on ESP32 by Attiq R. — A hardware prototype running the Grok Bot animation state machine on an ESP32 board, its faces blinking and morphing on a small round screen, surprisingly smooth for so small a chip.
  45. Grok Bot on the Action Button by Grok Bot — An announcement film for setting Grok Bot as the iPhone Action Button, one press of the side button opening the voice assistant in the Dynamic Island, microphone ready.
  46. Liquid Glass by Chan Karunamuni — Liquid Glass, Apple’s new design material for iOS, where buttons, sliders and menus behave like real glass, bending the light behind them and rippling like liquid under a fingertip.
  47. Dynamic Island Moments by Chan Karunamuni — Dynamic Island animations added to iOS over the year, where Apple’s black pill stretches into a live translation, Shazam, a song and an alarm, each moment growing from one shape.
  48. Timeline Scrollbar by Peng Zheng — A scrollbar UI component for a personal website that doubles as a timeline, with ratchet clicks, click to jump, drag to scrub and a long press that opens a focus ring, touch included.
  49. Age Slider by Aditya Sur — A slider micro-interaction that measures age on a portrait instead of a number, the face growing from a boy of five to a man in his nineties as the ruler moves, in mono or colour.
  50. Garden Slider by Sasha Balandina — A progress bar turned into a garden, a slider micro-interaction where poppies, daisies and lavender sprout as the value grows and shed their petals when it falls back.
  51. Metal Effect for SwiftUI by Jakub Antalik — A metal effect for SwiftUI that answers a real object on the table: bring a magnet near the iPhone and the rim of an email field catches the light, ready to use on libraries.dev.
  52. Liquid Popover by Kopp — A liquid popover menu UI component in plain HTML, CSS and JavaScript with no dependencies, where menus pour out of their buttons like liquid and draw back in as they close.
  53. Animated Checkbox by Osmo — An animated checkbox UI component built with semantic HTML and CSS only, so it drops into any form, where each orange box springs as it is ticked and its checkmark draws itself in.
  54. The Life of a Button by Cole Derochie — A UI concept that tells the history of interface design through a single component: dragging a timeline from 2026 to 1986 morphs one button from flat blue to glossy Aqua to pixel Mac.
  55. Good Air Weather Timeline by Nihal Singh — A weather app timeline interaction for Good Air 2.0 on iOS, where the hours ahead are scrubbed rather than read: a thumb drags the forecast from blue afternoon into red dusk and night.

Featuring work by

Benji Taylor, Kopp, Gabriel Obholz, Lorenzo Cabra, Alim Joldaspayev, Sasha Balandina, Nitish Khagwal, Chan Karunamuni, Andrey Rybin, Gustavo Rodrigues, Yanis Lebzar, Salung Prastyo, Kostya Farber, Keshav Bagaade, Abhishek Bariya, Matt Ölschlegel, Benjamin den Boer, Timeless, Praneeth Jonnala, Nicolas Jesenberger, Alex Herasov, Cristian Javier, Vercel, BLOND, Malay Patel, Raul Dronca, Gustavo Fior, Florian Kiem, Mike Barton, Kevin Dukkon, Apple, Mobin Amiri, James McDonald, Sasha Birukoff, Shawn, Adam Kowalski, Özer Gökalpsezer, Kushagra Agarwal, Val Guerra, Attiq R., Grok Bot, Peng Zheng, Aditya Sur, Jakub Antalik, Osmo, Cole Derochie, Nihal Singh.

Related topics

Browse by category

Topics