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 independent surfaces instead.

Use AnimatePresence with exact values: scale from 0.25 to 1, opacity 0 to 1, blur 4px to 0px, and transition type spring with duration 0.3 and bounce 0. Import from motion/react or framer-motion matching the installed package, 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 are interruptible and retarget mid-animation. Reserve keyframe animations 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, causes unintended animations on properties like padding or color, and blocks browser optimizations. Always name exact properties, such as 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 width that cannot be composited.