better-ui

Use the concentric radius formula: outer radius equals inner radius plus padding. For example, a card with 8px padding and a 12px inner radius needs a 20px outer radius. If padding exceeds 24px, treat the layers as separate surfaces instead.

Use AnimatePresence with a keyed motion element, animating scale from 0.25 to 1, opacity 0 to 1, and blur 4px to 0px with transition type spring, duration 0.3, and bounce 0. Without a motion 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. Reserve keyframe animations for one-shot staged sequences like enter animations, since keyframes restart from the beginning when interrupted.

Use layered transparent box-shadows for buttons, cards, and elevated containers where the border only creates depth, since shadows adapt to any background. Keep borders for structural purposes like dividers, table boundaries, and focus or selected states.

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

Skip custom animation on high-frequency interactions like keystrokes, row hovers, and repeated tab switches, since the attention cost repeats every trigger. Use instant feedback or a subtle opacity or color transition at 150ms or less, and never make motion the only feedback channel.