emil-design-eng

Use ease-out or a custom cubic-bezier curve like cubic-bezier(0.23, 1, 0.32, 1) for entering elements, and keep UI animation durations under 300ms. Avoid ease-in, which delays initial movement and makes interfaces feel sluggish.

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.

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

No. Actions repeated hundreds of times daily, like command palette toggles, should never animate because animation makes them feel slow and disconnected. Raycast has no open or close animation for this reason.

Use the CSS @starting-style rule to define the initial state, such as opacity 0 and translateY(100%), alongside a transition on the element. This replaces the React useEffect mounted-flag pattern where browser support allows.

Only animate transform and opacity, which skip layout and paint and run on the GPU. Animating width, height, margin, or padding triggers all rendering steps, and changing CSS variables on a parent recalculates styles for all children.