better-ui

Use concentric border radius: the outer radius must equal the inner radius plus the padding between them. For example, a card with 8px padding and a 12px inner radius needs a 20px outer radius. Past 24px of padding, treat layers as separate surfaces.

Use AnimatePresence with a keyed motion.span, animating opacity 0 to 1, scale 0.25 to 1, and blur 4px to 0px. Set transition to type spring, duration 0.3, and bounce 0. Import from motion/react or framer-motion matching the installed package.

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

A theme flip changes color, background, border, and shadow on every element, so all transitions fire together and smear. Inject a stylesheet disabling all transitions, force a reflow, then remove it on the next frame so the switch snaps instantly.

Use will-change only for transform, opacity, and filter, which the GPU can composite, and only after observing first-frame stutter. Never use will-change: all or apply it preemptively, since each compositing layer costs memory.

Use a 2px stroke width beside medium or semibold (500-600) text on a 24px grid. Regular 400-weight text pairs with 1.5px, and bold 700 pairs with 2.5px. Keep one stroke weight per icon set and one icon library per surface.