emil-design-eng

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

Use ease-out for entering elements, ease-in-out for on-screen movement, and linear for constant motion. Prefer custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) since built-in CSS easings are too weak.

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 its x/y shorthand props are not hardware-accelerated.

Popovers default to transform-origin: center, which makes them scale from the wrong point. 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 100+ times daily, such as keyboard shortcuts and command palette toggles. Animation on high-frequency actions 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.