Pointer micro-interactions are the smallest conversation in the interface — hover, press, release. They cost almost nothing and make controls feel physical and responsive to the touch.

HOVERLift + shadow PRESSDepress RELEASESpring back DURATION120 ms

D01.1 · HOVER

A small lift.

On hover, interactive elements rise a couple of pixels and gain a soft shadow — a quiet "this is live". The change is small enough to feel natural, clear enough to confirm interactivity.

D01.2 · PRESS

Push down.

On press, the element depresses — settling back down, sometimes with a faint inner shadow. It mirrors pressing a physical button, and confirms the input landed before anything else happens.

D01.3 · RELEASE

Spring back.

On release, the element springs back to rest with a touch of ease. The return completes the gesture — pressing and releasing feel like one connected motion, not two states.

D01.4 · TOUCH & ACCESS

Works without a cursor.

Touch has no hover, so press and active states carry the feedback there. Focus states mirror hover for keyboard users — the reply is never tied to a mouse alone.

Inputs are where users do the real work, and small motions make that work feel reliable — a focus ring that appears, a toggle that slides, a field that confirms or corrects in place.

FOCUSRing fades in TOGGLEKnob slides VALIDInline feedback ERRORShake · once

D02.1 · FOCUS

A ring, clearly.

Focusing a field fades in a clear focus ring in vermilion or ink. It's never removed for aesthetics — keyboard users depend on it, and the gentle fade makes it feel intentional rather than abrupt.

D02.2 · TOGGLES & SWITCHES

The knob slides.

A switch animates its knob across and its track colour with it, so the state change is unmistakable. The motion is the feedback — you see the switch flip, you don't just find it flipped.

D02.3 · VALIDATION

Confirm in place.

Valid input gets a quiet inline check; the feedback appears beside the field, not in an alert elsewhere. Validation animates in gently so it informs without alarming.

D02.4 · ERRORS

A single shake.

An error may shake the field once — a short, horizontal nudge — then hold the message. One shake signals "look here"; a repeating shake would nag. The message stays until fixed.

Loading is unavoidable; anxiety about it is not. WCN uses skeletons that preview structure, determinate bars where progress is known, and a single restrained spinner only as a last resort.

DEFAULTSkeleton KNOWNProgress bar SPINNERLast resort JUMPNone

D03.1 · SKELETONS

Preview the shape.

While content loads, a skeleton of its layout shows — grey blocks where text and images will land. It sets expectations and prevents the jump that happens when content pops in late.

D03.2 · DETERMINATE

Show how far.

When the duration or amount is known — an upload, a multi-step process — a determinate bar shows real progress. A bar that reflects truth is far calmer than an endless spinner.

D03.3 · SPINNERS

Only when nothing else fits.

A single, restrained spinner is the last resort — for short, unknowable waits where no skeleton or bar makes sense. One spinner style, used sparingly, never three spinning at once.

D03.4 · PERCEIVED SPEED

Feel faster.

Showing partial content as it arrives, and responding to taps instantly even before data lands, makes waits feel shorter than they are. Perceived speed is designed, not just measured.

Drag is the most physical interaction in an interface, so its motion must feel the most real — the dragged thing tracks the finger exactly, neighbours make room, and a clear target says "drop here".

LIFTShadow + scale TRACK1:1 with input TARGETSHighlight DROPSnap into place

D04.1 · LIFT

Pick it up.

On grab, the item lifts — a slight scale-up and a stronger shadow — so it visibly leaves the surface. The lift makes clear the thing is now attached to the cursor, not the page.

D04.2 · TRACK

Follow the finger.

While dragging, the item follows the pointer one-to-one with no lag or easing — direct manipulation must feel direct. Any delay here breaks the illusion that you're holding it.

D04.3 · DROP TARGETS

Show where it lands.

Valid drop zones highlight as the item moves over them, and neighbours shift to open a gap at the insertion point. The user sees the outcome before releasing.

D04.4 · DROP

Snap home.

On release, the item settles into its slot with a quick eased move; an invalid drop springs it back to where it came from. Either way, the resolution is immediate and unambiguous.

Every action deserves an answer. WCN confirms success quietly and clearly — a check that draws on, a toast that slides in and out, a copied-state that flips for a moment — so the user never wonders whether something happened.

SUCCESSCheck draws on COPYFlip to confirmed TOASTSlide in / out TONEReassure

D05.1 · SUCCESS

A check, drawn.

A completed action shows a check that draws itself on — a brief stroke animation rather than an instant icon. The drawing reads as "just happened" and feels rewarding without being loud.

D05.2 · COPY-CONFIRMED

Flip, then back.

A copy button swaps its label to "Copied" with a quick crossfade, then reverts after a moment. The temporary flip confirms the invisible action of copying without needing a toast.

D05.3 · TOASTS

Slide in, slide out.

Toasts enter from an edge, hold long enough to read, and leave on their own. They stack gently, never cover the action that triggered them, and an important one waits for dismissal.

D05.4 · TONE

Reassure, don’t celebrate.

Feedback matches the weight of the action — a quiet check for routine success, more emphasis for a rare milestone. Confetti on every save is exhausting; restraint keeps real moments meaningful.

Interfaces are full of small state changes — enabled to disabled, a count ticking up, a selection made. Animating those transitions keeps the interface honest about what just changed and why.

ENABLEFade in / out COUNTTick up SELECTMark clearly BADGEPop in

D06.1 · ENABLED ↔ DISABLED

Fade between active.

When a control enables or disables, it crossfades its opacity and colour rather than switching instantly. The transition explains the change — the user sees a button become available as a condition is met.

D06.2 · COUNTS & BADGES

Tick, don’t teleport.

A changing number rolls or ticks to its new value, and a badge pops in with a small scale. The motion draws the eye to the thing that changed without a jarring jump in the layout.

D06.3 · SELECTION

Mark the choice.

Selecting an item animates its selected state — a fill, a check, a border — so the choice is unmistakable. In a group, the previous selection releases as the new one takes hold.

D06.4 · CONSISTENCY

Same change, same motion.

A given state change always animates the same way across the product, so users learn what the motion means. Consistency turns these micro-transitions into a vocabulary rather than a set of one-offs.