better-ui

Use concentric border radius: 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 from 0 to 1, and blur from 4px to 0px. Set transition to type spring, duration 0.3, and bounce 0, and add initial={false} to skip animation on page load.

Use CSS transitions for interactive state changes like hover, toggle, and open/close because they can be interrupted mid-animation and retarget smoothly. Reserve keyframes for one-shot staged sequences such as enter animations or loading states.

Yes. Keep both icons in the DOM with one absolutely positioned, and cross-fade them using CSS transitions with cubic-bezier(0.2, 0, 0, 1). This gives both enter and exit animations without adding any dependency.

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

Only add will-change when you notice first-frame stutter, and only for GPU-compositable properties: transform, opacity, and filter. Never use will-change: all, and avoid it for properties like background-color or padding that cannot be composited.