emil-design-eng

Use ease-out curves so movement starts immediately, keep durations under 300ms, and add press feedback like transform: scale(0.97) on :active. Avoid ease-in, which delays initial movement and makes interfaces feel sluggish.

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

Use CSS transitions for predetermined, rapidly-triggered UI animations since they run off the main thread and are interruptible. Use Framer Motion springs for gestures and interruptible drag interactions, but prefer full transform strings over x/y shorthand for hardware acceleration.

Popovers often use the default transform-origin: center, making them scale from the middle instead of their trigger. Set transform-origin to the trigger location, and never start entrance animations from scale(0); begin at scale(0.95) with opacity 0.

Skip animation for actions performed hundreds of times daily, such as keyboard shortcuts and 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.