Micro-interaction

The product image shrinks and flies along an arc into the cart icon.

Add an "Add to Cart Fly" animation (also called fly to cart or add-to-cart animation) to [where].
When the add button is pressed, a small copy of the product image should shrink as it flies along a smooth, quick arc into the cart icon, and the cart should give a small bump as its count updates.
Play it once per press without moving the original product card, and skip the flight for users who prefer reduced motion while still updating the cart.

A checkmark is drawn stroke by stroke inside the box when it is ticked.

Add a "Checkbox Check Draw" animation (also called an animated checkbox or checkmark draw) to [where].
When the box is ticked it should fill with color and the checkmark should draw itself in one quick, smooth stroke; unticking erases it the same way.
Keep it a real checkbox with its checked state, working with the keyboard and a visible focus ring.

Colorful paper pieces burst out and fall to celebrate a success.

Add a "Confetti" celebration (also called a confetti burst) to [where].
Small colorful paper pieces should burst quickly out of the button, then tumble and drift down as they fade away, in a short, lively shower.
Fire it once per success rather than looping, keep it from blocking clicks on the page, and skip it for users who prefer reduced motion.

The copy icon morphs into a checkmark and the label reads Copied for a moment.

Add a "Copy-to-Clipboard Feedback" animation (also called a copied state or copy icon to checkmark) to [where].
When the copy button is pressed, the copy icon should quickly shrink away as a checkmark draws in and the label changes to "Copied", then everything eases back after a short moment.
Keep the button the same size during the swap so nothing shifts, and announce the copied state to screen readers.

An element follows the pointer when dragged and can be limited to an area or an axis.

Add a "Drag" interaction (also called draggable or drag constraints) to [where].
The element should follow the pointer directly while dragged, stop at the edges of its allowed area, and spring back to its resting place with a small bounce when released.
Make it work with touch as well as a mouse without the page scrolling underneath, and offer a keyboard way to move it.

The placeholder label moves up and shrinks above the field when it is focused or filled.

Add a "Floating Label" (also called a float label or animated placeholder) to [where].
When the field is focused or has a value, the label sitting inside it should glide up and shrink onto the top edge of the field, smoothly and quickly, and drop back only when the field is empty and unfocused.
Keep it a real label tied to the input, and make sure the field height does not change so the form never shifts.

A heart icon fills with color and bursts small particles or pulses when clicked.

Add a "Like / Heart Burst" animation (also called a heart animation or favorite toggle) to [where].
When it is liked, the heart should fill with color and pop with a springy bounce while a ring and small dots burst outward and fade, all quick and playful; unliking just empties the heart quietly.
Keep it a real toggle button with its pressed state, and play the burst only when turning it on.

Holding an item down for a moment triggers extra actions or a progress fill.

Add a "Long Press" interaction (also called press and hold or touch and hold) to [where].
While the item is held down it should sink slightly as a progress fill sweeps across it at a steady pace, and when the fill completes it springs back and opens its menu; letting go early cancels and resets the fill.
Give keyboard and screen reader users another way to reach the same actions, and do not let the hold trigger text selection or the browser's own context menu.

A count badge pops, bounces, or pulses when a new notification arrives.

Add a "Notification Badge Bounce" animation (also called a badge pop or ping) to [where].
When a new notification arrives, the count badge should pop in from nothing and settle with a couple of quick, springy bounces while a soft ring pulses out from it once.
Play it once per new notification rather than looping, and announce the new count to screen readers.

An eye icon switches between open and slashed as the password text is shown or hidden.

Add a "Password Reveal Toggle" (also called show/hide password or an eye icon toggle) to [where].
Pressing the eye should quickly wipe away its slash as the hidden dots crossfade into the real characters, and pressing again draws the slash back and hides them: smooth and quick, with no bounce.
Keep the field width steady so the text does not jump, and make the toggle a real button whose label says whether the password is shown.

A pointer arrow draws a highlight box around a word when the text scrolls into view.

Add a "Pointer Highlight" effect to [where].
As the text scrolls into view, a box should draw itself around the key word from left to right while a small pointer arrow travels along its corner, smooth and steady, as if someone is marking the word by hand.
Draw it only once when it first comes into view without shifting the text, and show the finished box right away for users who prefer reduced motion.

The element shrinks slightly while pressed and springs back on release.

Add a "Press (Button Tap Scale)" effect (also called tap feedback or press state) to [where].
While it is pressed the element should shrink slightly and darken a touch, then spring back to full size with a small bounce on release: quick and subtle.
Show the same feedback for keyboard presses and touch, and keep the surrounding layout from shifting.

Dragging a list down reveals a spinner and reloads the content on release.

Add a "Pull to Refresh" interaction (also called swipe to refresh) to [where].
When the list is pulled down from the top it should follow the finger with some resistance and reveal a spinner that turns as it is pulled; on release the spinner keeps spinning while the content reloads, then the list slides smoothly back up.
Only start it when the list is already scrolled to the top, and give keyboard and screen reader users a regular refresh control too.

A circular wave expands and fades from the exact point of the click or tap.

Add a "Ripple" effect (also called a material ripple or ink ripple) to [where].
On each click or tap, a soft circular wave should spread out from the exact point that was pressed until it covers the element, fading as it grows: quick and light.
Clip the wave to the element's shape, let rapid presses each start their own ripple, and start it from the center for keyboard presses.

A circle and tick draw themselves to confirm an action succeeded.

Add a "Success Checkmark" animation (also called an animated success tick) to [where].
A circle should draw itself around in one smooth stroke, then the tick draws inside it and the whole mark gives a small, gentle pop: calm and confident.
Play it once when the action succeeds, pair it with a text message screen readers can announce, and show the finished mark right away for users who prefer reduced motion.

Swiping a list row sideways reveals action buttons such as delete or archive.

Add a "Swipe to Delete" interaction (also called swipe actions or swipe to reveal) to [where].
Dragging a row sideways should slide it directly with the finger to uncover action buttons such as archive and delete behind it, stopping once they are fully shown, and on release it glides smoothly into place without bounce.
Keep vertical scrolling working while swiping horizontally, and make the same actions reachable by keyboard and screen readers without swiping.

A round knob slides along a track and the track color changes between off and on.

Add a "Toggle Switch" animation (also called a switch) to [where].
When it is turned on or off, the round knob should slide smoothly to the other end of the track while the track color changes: quick and crisp, with no bounce.
Keep it a real accessible switch (role="switch" with its checked state) that also works with the keyboard.