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, interruptible gestures, and elements that should feel alive, since they maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes, and prefer transitions over keyframes for rapidly triggered elements.

No. Actions repeated hundreds of times daily, like keyboard shortcuts or command palette toggles, should never animate. Animation makes them feel slow and disconnected; Raycast's instant open/close is the reference experience.

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

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, so scaling from center looks disconnected. Set transform-origin to the trigger location, for example via Base UI's var(--transform-origin). Modals are the exception and should stay centered.