The micro-interaction checklist: 8 details that make UI feel expensive

Cheap vs expensive is 40 milliseconds

Nobody can tell you WHY your interface feels like a template. But they can feel it: every state change snaps instantly (0ms), every hover is a color swap, every toggle is binary. Expensive interfaces respond with physics — tiny, deliberate, over in under a second. Here is the checklist, with the exact values.

The eight

• Magnetic pull — CTAs lean toward the cursor at ~0.3× the offset within a 110px field, spring back with a slight overshoot (cubic-bezier(.2,.9,.25,1.35)).
• Spring toggles — knobs travel with cubic-bezier(.3,1.6,.4,1); the 1.6 overshoot is what reads as "real switch".
• Draw-in checks — checkmarks that draw via stroke-dashoffset in 300ms beat opacity fades; the hand feels authored.
• Status breathing — live dots pulse a soft expanding ring every ~2s; static dots read as dead.
• Glow on focus — inputs ignite a 3px ring + soft outer glow + a gradient bar scaling in from the left.
• Sheen sweep — one skewed light band across a button on hover, 600ms, once. Not on every hover-frame.
• Ripple on commit — clicks spawn one radial wave at the press point; the interface acknowledges the touch.
• Honest hover lift — cards translate -4px with a deepening shadow. Never scale above 1.03; scaling text looks cheap.

The dose makes the poison

Eight of these on one screen is a circus. The premium feel comes from restraint: one magnetic CTA per view, breathing dots only where something is genuinely live, and everything else at 150-250ms quiet transitions. Audit any interface you admire — it usually uses exactly one "expensive" mechanic per screen.

And every one of them needs the reduced-motion fallback: the state change still happens, just without the flourish. Accessibility is part of the premium feel — janky or nauseating is the opposite of expensive.