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. Custom cubic-bezier curves such as cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

Use springs for drag interactions with momentum, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes that need to run off the main thread.

No. Actions repeated hundreds of times daily, like command palette toggles or keyboard shortcuts, should have no animation. Animation makes frequent actions feel slow and disconnected from user input, which is why tools like Raycast skip open/close animations.

Framer Motion's shorthand x, y, and scale props run on the main thread via requestAnimationFrame and are not hardware-accelerated. Use the full transform string like transform: "translateX(100px)" or switch to CSS animations, which stay smooth when the browser is busy.

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, for example via var(--transform-origin) in Base UI. Modals are the exception and should stay centered.