emil-design-eng

Use ease-out curves instead of ease-in, keep durations under 300ms, and add scale(0.97) press feedback on buttons. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

Use ease-out for entering elements since it starts fast and feels responsive. Never use ease-in for UI animations because the slow start makes interfaces feel sluggish. Keep dropdown durations between 150-250ms.

Use CSS transitions for predetermined animations since they run off the main thread and stay smooth under load. Use Framer Motion springs for interruptible gestures, but note that x/y shorthand props are not hardware-accelerated; use full transform strings instead.

The default transform-origin: center makes popovers scale from the middle instead of their trigger. Set transform-origin to the trigger location, and never animate from scale(0); start from scale(0.95) with opacity 0 instead.

Skip animation for actions performed 100+ times daily, such as keyboard shortcuts and command palette toggles. Animation on keyboard-initiated actions makes them feel slow and disconnected from user input.

Use the prefers-reduced-motion media query to remove transform-based movement while keeping opacity and color transitions that aid comprehension. Reduced motion means gentler animation, not zero animation.