Drag

Dragging an item makes others slide out of the way and settle in the new order.

Add a "Drag-to-Reorder List" (also called a sortable list) to [where].
The dragged item should follow the pointer directly and lift slightly, while the other items slide smoothly out of its way; on release it should settle quickly into the nearest slot.
Support touch as well as mouse, and offer a keyboard way to move items with the new position announced to screen readers.

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.

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 draggable divider reveals one image on one side and another on the other.

Add a "Before-After Slider" (also called an image comparison slider or compare slider) to [where].
Two images sit on top of each other, and dragging a vertical divider reveals more of one and less of the other; the divider follows the pointer directly with no lag.
Start the divider in the middle, and make it work with touch and with the arrow keys.

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.