Copy-to-Clipboard Feedback

An icon such as a hamburger menu turns into another (X) with bars rotating and moving.

Add an "Icon Morph" (also called hamburger to X or a menu icon morph) to [where].
On each press, the top and bottom bars should first slide together to the middle and then rotate into an X while the middle bar fades out, and pressing again reverses it: quick and snappy.
Make it a real toggle button whose accessible label and expanded state change with it, and keep the icon's size fixed so nothing around it shifts.

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.

A button swaps its label for, or adds, a small spinner while an action runs.

Add a "Button Loading State" (also called a spinner button or loading button) to [where].
When pressed, the button should give a small press, fade its label out and show a small spinner in its place while the action runs, then bring the label back when it finishes.
Keep the button's width fixed while it loads, block repeat presses, and announce the busy state 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.

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.