better-ui

Use CSS transitions for interactive state changes since they can be interrupted mid-animation, and reserve keyframes for staged sequences. Stagger infrequent entrances by about 100ms, keep exits subtle with small translateY values, and use ease-out for both.

Calculate concentric radii with the formula outer radius equals inner radius plus padding. For example, a card with 16px inner radius and 8px padding needs a 24px outer radius. Equal nested radii make inner surfaces look pinched.

If framer-motion is in package.json, use it with spring transitions, duration 0.3, and bounce 0. Without a motion library, keep both icons in the DOM and cross-fade with CSS transitions using cubic-bezier(0.2, 0, 0, 1).

transition: all animates every property including ones that should change instantly, causing unexpected motion and performance issues. Always specify exact properties like scale and opacity, and use will-change only for transform, opacity, or filter.

Skip custom animation on high-frequency interactions like hover or keystroke feedback, since the attention cost repeats on every trigger. Use instant feedback or transitions under 150ms, and never make motion the only feedback channel.