emil-design-eng

Use ease-out curves instead of ease-in, keep durations under 300ms, and add scale(0.97) on :active for press feedback. Ease-out starts moving immediately, which feels faster than ease-in at the same duration because the user sees instant movement.

Use a strong custom ease-out like cubic-bezier(0.23, 1, 0.32, 1) for entering elements, with durations of 150-250ms. Built-in CSS easings are too weak; resources like easing.dev provide stronger variants of standard curves.

Use CSS transitions for predetermined animations and rapidly-triggered UI since they run off the main thread and are interruptible. Use Framer Motion springs for drag gestures and interruptible physics-based motion, but use the full transform string instead of x/y props for hardware acceleration.

The default transform-origin: center makes popovers scale from the middle instead of their trigger. Set transform-origin to var(--radix-popover-content-transform-origin) for Radix UI or var(--transform-origin) for Base UI. Modals are the exception and should stay centered.

Never animate keyboard-initiated actions or elements seen 100+ times per day, such as command palettes, since animation makes repeated actions feel slow. Also avoid animating from scale(0); start from scale(0.95) with opacity 0 instead.

Use the prefers-reduced-motion media query to remove transform-based movement while keeping opacity and color transitions that aid comprehension. In React, useReducedMotion from Framer Motion lets you conditionally disable positional animation values.