Checkbox Check Draw

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.

An SVG stroke appears to be drawn along its path as the dash offset animates.

Add a "Line Drawing" animation (also called path drawing or a self-drawing SVG) to [where].
Each stroke should appear to draw itself smoothly along its path from start to end, with a second stroke such as a checkmark following right after the first.
Play it once when it comes into view rather than looping, and show the fully drawn lines to users who prefer reduced motion.

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.

A list of steps highlights or checks off one by one as a long task advances.

Add a "Multi-Step Loader" (also called a step loader or checklist loader) to [where].
The steps should light up one at a time from top to bottom, and each should get a small checkmark that pops in as it completes, at a calm, readable pace.
Advance the steps with the real task progress rather than a fixed timer, and announce each completed step to screen readers.

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.