with the skill
## What's going on
Your render time isn't the problem. The animation is. The palette is keyboard-triggered and opened dozens of times an hour, which puts it in the "no animation, ever" tier (Raycast has no open/close animation for this reason). Your spring makes it worse:
- **Settle time is about 1s.** With `stiffness: 120, damping: 8`, the damping ratio is ~0.37, which is very underdamped. It overshoots by ~29% (scale goes past 1.0 to roughly 1.06) and wobbles for around a second. Users feel that wobble as lag even though the input is focusable immediately.
- **The exit is animated too.** `AnimatePresence` keeps the palette mounted until the exit spring finishes. Closing and reopening quickly means fighting a half-dismissed palette.
- **`scale: 0.8` and `y: -20` are a big visual jump.** It reads as a "pop", not a subtle entrance.
- **Motion's `scale`/`y` shorthands run on the main thread.** If the app is busy, for example while loading command results, frames drop and it feels worse.
## Review
| Before | After | Why |
| --- | --- | --- |
| Animated open on a Cmd+K action | No animation, render immediately | Keyboard-initiated, high-frequency actions should feel instant; animation makes them feel delayed and disconnected |
| `type: "spring", stiffness: 120, damping: 8` | Remove the spring | Very underdamped: ~29% overshoot and ~1s to settle. Springs with bounce don't belong in utility UI |
| `exit={{ opacity: 0, scale: 0.8, y: -20 }}` | No exit animation | `AnimatePresence` holds the node mounted until the exit finishes, so close feels slow and reopen can collide |
| `scale: 0.8` start | If you animate at all, `scale: 0.97` with opacity | Large scale jumps feel like a pop. Use a barely perceptible start, and never go near `scale(0)` territory |
| `y: -20` / `scale` shorthands | Full `transform` string, or CSS | Shorthands aren't hardware accelerated and drop frames under load |
| Spring for a non-gesture, non-decorative element | Not needed | Springs suit drag,
Show the rest (29 more lines)
momentum, and interruptible gestures, not a command palette toggle |
## Fix
```tsx
{open && (
<div className="palette">
<input autoFocus placeholder="Type a command" />
...
</div>
)}
```
No `AnimatePresence`, no `motion.div`. It mounts and unmounts instantly, and the input is focused on the same frame as the keypress.
If you want some polish for mouse-triggered opens (a menu button, say), split the behavior. Keep Cmd+K instant, and for pointer opens use a short transition with no bounce:
```css
.palette {
transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1),
transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.palette[data-starting-style] {
opacity: 0;
transform: scale(0.97);
}
```
Even then, I'd leave the exit instant, or make it faster than the enter. For your power users, the best version is the one they never notice.