Micro-interaction
Also called microinteraction or micro animation
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
import { useState } from 'react';
import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
const COPIED_FOR = 1500; // ms
export function CopyLinkButton({ url }: { url: string }) {
const [copied, setCopied] = useState(false);
const reduceMotion = useReducedMotion();
const hidden = { opacity: 0, scale: reduceMotion ? 1 : 0.5 };
async function copy() {
await navigator.clipboard.writeText(url);
setCopied(true);
setTimeout(() => setCopied(false), COPIED_FOR);
}
return (
<button
type='button'
onClick={copy}
className='inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium hover:bg-muted'
>
<AnimatePresence mode='popLayout' initial={false}>
<motion.svg
key={copied ? 'check' : 'copy'}
initial={hidden}
animate={{ opacity: 1, scale: 1 }}
exit={hidden}
transition={{ type: 'spring', duration: 0.3, bounce: 0.4 }}
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth={2}
strokeLinecap='round'
strokeLinejoin='round'
aria-hidden
className={`size-4 ${copied ? 'text-emerald-600' : ''}`}
>
{copied ? (
<path d='M20 6 9 17l-5-5' />
) : (
<path d='M8 8h12v12H8zM4 16V4h12' />
)}
</motion.svg>
</AnimatePresence>
{/* aria-live announces "Copied" to screen readers too. */}
<span aria-live='polite'>{copied ? 'Copied' : 'Copy link'}</span>
</button>
);
}Add micro-interactions to the post actions: the like heart scales from 0.5 to 1.2 to 1 over 450ms while a ring and 8 small particles burst out; the bookmark fills from the bottom up over 350ms; the copy button swaps its icon for a green checkmark with a spring and reads "Copied" for 1.5s before reverting. Announce "Copied" to screen readers and skip the particles when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Micro-interaction?
A micro-interaction wraps one small task: liking a post, saving an item, copying a link, flipping a switch. It has a trigger (the click), a response (the heart fills, the icon swaps), and often a short message such as "Copied". Done well, it confirms the action without asking for attention.
Use them on frequent actions where people want to know something happened, especially when the result isn’t otherwise visible, like copying to the clipboard or saving to a list. Kept small, they also give a product personality.
Keep them short: most last 150–400ms, and anything people trigger dozens of times a day should stay subtle. Never make people wait for the animation before they can continue, pair visual changes with text or an aria-live message for screen readers, and tone them down for people who prefer reduced motion.
Related terms
All termsPress feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Purposeful animation
Animation used only where it helps people notice a change, follow where something went, or understand what just happened.
Hover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Toggle switch
An on/off control shaped like a small track with a sliding knob, used for settings that take effect immediately.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.