emil-design-eng

Use ease-out curves for entering elements, keep UI animations under 300ms, and replace `transition: all` with specific properties like transform. Custom cubic-bezier curves such as cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in easings.

Use springs for drag interactions with momentum, interruptible gestures, and elements that should feel alive. Springs maintain velocity when interrupted, while CSS keyframes restart from zero. Use CSS transitions for predetermined, rapidly-triggered UI state changes.

Popovers should scale from their trigger element, not from center. Set transform-origin to the trigger location, for example using Radix UI's --radix-popover-content-transform-origin variable. Modals are the exception and should stay centered.

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

Use the prefers-reduced-motion media query to remove transform-based movement while keeping opacity and color transitions that aid comprehension. In React, useReducedMotion from Framer Motion lets you conditionally disable positional animation values.

Skip animation for actions performed 100+ times daily, such as keyboard shortcuts and command palette toggles. Animation on high-frequency keyboard-initiated actions makes the interface feel slow and disconnected from user input.