make-interfaces-feel-better

Use concentric border radius: the outer radius must equal the inner radius plus the padding between them. For example, a card with 8px padding and a 12px inner radius needs a 20px outer radius. Equal radii on nested elements is the most common cause of interfaces feeling off.

Animate icons with opacity, scale, and blur instead of toggling visibility: scale from 0.25 to 1, opacity 0 to 1, blur 4px to 0px. With motion or framer-motion use a spring with duration 0.3 and bounce 0; without a library, keep both icons in the DOM and cross-fade with CSS transitions.

Use CSS transitions for interactive state changes because they are interruptible and retarget mid-animation when the user changes intent. Reserve keyframe animations for staged one-shot sequences like enter animations or loading states.

Yes, the guidance adapts to the project's existing stack: Tailwind classes in Tailwind projects, plain CSS otherwise, and imports from motion or framer-motion matching what package.json already contains. It never introduces a second styling system or new dependency.

transition: all forces the browser to watch every property, causing unintended animations on colors, padding, or shadows and blocking optimizations. Always name exact properties, such as transition-property: scale, opacity, or use Tailwind's transition-transform for transform-only changes.

Skip custom animation on high-frequency interactions like row hovers or keystrokes; use instant feedback or a minimal opacity or color transition under 150ms instead. Motion must never be the only feedback channel, and reduced-motion preferences should be honored.