emil-design-eng

Use ease-out curves instead of ease-in, keep durations under 300ms, and add press feedback like transform: scale(0.97) on :active states. Ease-out shows immediate movement at the moment users watch most closely, making the interface feel faster at the same duration.

Use springs for drag interactions, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes, and prefer transitions over keyframes for rapidly triggered elements like toasts.

No. Keyboard-initiated actions repeat hundreds of times daily, and animation makes them feel slow and disconnected. Raycast has no open/close animation for this reason. Reserve animation for occasional interactions like modals, drawers, and toasts.

Framer Motion's shorthand x/y/scale props run on requestAnimationFrame on the main thread, so they drop frames when the browser is busy. Use the full transform string like transform: "translateX(100px)" for hardware acceleration, or switch to CSS animations which run off the main thread.

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

Popovers are anchored to a trigger element, so scaling from center looks disconnected. Set transform-origin to the trigger location, such as Base UI's var(--transform-origin). Modals are the exception and should keep transform-origin: center since they appear centered in the viewport.