better-ui

Set the outer radius equal to 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 element, animating opacity 0 to 1, scale 0.25 to 1, and blur 4px to 0px. Set the transition to a spring with duration 0.3 and bounce 0, and import from the package already in package.json.

Use CSS transitions for interactive state changes because they can be interrupted and retargeted mid-animation. Reserve keyframe animations for staged one-shot sequences like enter animations, since they restart from the beginning when retriggered.

A theme flip changes color, background, border, and shadow on many elements at once, so every transition fires together and smears. Inject a stylesheet disabling all transitions, force a reflow, then remove it on the next frame.

Add will-change only for transform, opacity, or filter when you observe first-frame stutter, since only those properties are GPU-compositable. Never use will-change: all or apply it preemptively, because each compositing layer costs memory.

Text wrapping, font rendering, and tabular numbers belong to better-typography; hit areas, focus, ARIA, and reduced motion belong to better-accessibility; grouping, breakpoints, and spatial RTL belong to better-layout.