Elite Micro-Interactions

Navigation that follows the cursor

macOS Floating Dock

A fixed set of destinations that should stay visible. Icons inflate near the cursor and push their siblings aside, so it wants a pointer to make sense.

Gooey Navigation Menu

One trigger should open into three or four actions. The liquid stretch pulls the eye, which makes it wrong for anything reached constantly.

Collecting input

Multi-Select Token Pills

A tag input where each selection should read as a removable object. Pills pop in on add and close the gap on remove without snapping the layout.

File Uploader

A drag and drop upload area that has to carry state after the drop. Image tiles and document cards with circular progress, rather than a bare file input.

Feedback on things you can click

Cool Button

A single call to action should look alive while staying still. A dual-layer orbit glow rides the edge at no layout cost.

Follow Cursor Label

Hover targets need naming as the cursor passes over them. The label trails with an elastic pop-in, and does nothing on touch.

Waiting states

Shimmering Skeleton Wrapper

A skeleton loader should breathe while data arrives. One angled sweep crosses whatever geometry you wrap, instead of every row shimmering out of step.

Comparing two images

Before After Card

Showing a retouch, a redesign, or a restoration. Drag the handle to wipe between the two versions with no lag behind the pointer.

Virtual keyboards

Tactile Keyboard, over in Show Off, is a third option built around colorways.

Mechanical Keyboard

Key feel is the thing you are selling. Keychron-style per-key travel with real switch sound, which browsers will not play until someone clicks first.

Magic Keyboard

The board is set dressing for a Mac product shot. Three finishes, a latching caps LED, and a choice of ANSI or ISO layouts, with no sound.