emil-design-eng

Use ease-out curves for entering elements, keep UI animations under 300ms, and add scale(0.97) on :active for press feedback. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

Use ease-out for elements entering the screen, since ease-in delays initial movement and feels sluggish. Dropdowns work best at 150-250ms, modals at 200-500ms, with a strong custom curve rather than default CSS easings.

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 the full transform string 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 repeated hundreds of times daily, like keyboard shortcuts or command palette toggles. Animation on high-frequency interactions makes the interface 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.