better-ui

Use interruptible CSS transitions for interactive state changes and reserve keyframes for one-shot sequences. For contextual icon swaps, animate opacity, scale from 0.25 to 1, and blur from 4px to 0, using a spring transition with duration 0.3 and bounce 0 when Motion is installed.

Apply 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.

Check the project's package.json first: import from motion/react or framer-motion if either is installed, matching existing import conventions. If no motion library exists, keep both icons in the DOM and cross-fade with CSS transitions using cubic-bezier(0.2, 0, 0, 1).

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

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

Match icon stroke to adjacent text weight: 1.5px beside regular 400 text, 2px beside semibold 600, and 2.5px beside bold 700 text on a 24px grid. Use one stroke weight per icon set and never mix icon libraries on a single surface.