Confetti

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.

Many small dots drift, connect or react to the pointer across the background.

Add a "Particles" background (also called floating particles or a particle field) to [where].
Small dots of different sizes should float and drift slowly in gentle, wandering paths, each at its own pace: calm and airy.
Keep the number of dots modest so it stays light on slower devices, pause it when it is off screen, and stop it for users who prefer reduced motion.

Small bright specks flicker in and out around text or a section.

Add a "Sparkles" effect (also called glitter or twinkle particles) to [where].
Small star-shaped specks should pop in, twinkle and fade out around the text at scattered spots and random moments: light and quick.
Keep the sparkles decorative and hidden from screen readers, never cover the text itself, and stop them for users who prefer reduced motion.

Letters fly apart on hover and return, or burst outward on entry.

Add a "Letter Scatter" hover effect (also called scatter gather letters or an explosive letter burst) to [where].
When the pointer moves over the text, each letter should fly a short way out in its own direction with a little spin, then smoothly gather back into the word when the pointer leaves.
Keep the word's space in the layout fixed while the letters move, keep it read as one word by screen readers, and show the same effect on keyboard focus.

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.