Magnetic buttons and other microinteractions worth shipping

Most microinteractions are vanity. They look great in a Dribbble shot and add nothing to the user's experience of the product. A few, a small few, earn their place. Here's how to tell which is which.

The two questions

Before shipping any motion detail, ask:

1. 01Does it convey information? A button that subtly shrinks when pressed confirms the click registered. That's information. A button that pulses for no reason is decoration.
2. 02Is it under 200ms? Microinteractions live in the 100–250ms range. Past that, they're no longer micro, they're a thing the user is waiting on.

The ones worth shipping

Magnetic CTA

The primary CTA on a hero subtly tracks the cursor when it's nearby, pulling 4–8 pixels toward the mouse position. Used by Arc, Vercel, Linear. Done well, it feels alive. Done at full strength, it feels gimmicky. Keep the magnetism subtle.

Button press feedback

On click, the button scales to 0.97 for 100ms. Confirms the click registered, especially valuable on touch where there's no cursor change. Universal, ship it everywhere.

Optimistic state transitions

The like button fills before the request completes. The toast appears before the server confirms. If the request fails, you reconcile. Optimistic UI is the single biggest perceived-speed win a product can ship.

Skeleton loaders

Better than spinners for content-shaped loading. The user sees structure before content, which feels faster than seeing nothing then everything.

The ones to skip

• Hover animations on every card. If every card scales and shadows on hover, none of them feel special. Reserve for primary actions.
• Decorative scroll-triggered animations. A graph that animates from zero every time it scrolls into view is annoying after the second scroll-through.
• Cursor trails. Just don't.
• Letter-by-letter type-in. Looks impressive in a demo, makes content unreadable in practice.

Build one

The magnetic-cta and scroll-stagger entries have tuned prompts. Pair with page-transitions, together they form your motion system, and motion systems work best when they feel coherent rather than collected.