A command palette opens on a known shortcut. Search is the first thing in it, and the cursor is already there. The list stays short: the matches for what was typed, not every command in the product. Enter runs the highlighted row. Escape closes the palette and puts focus back where it was.
The entrance is a short fade and a small rise. It has to be interruptible. If the person types, or presses Escape, while the palette is still moving, the motion stops and the new state wins. Waiting for the rise to finish makes the list late. A bounce makes it later, and it makes a tool feel like a toy.
The left plate opens on every command, with no search, and a highlight on a row nobody asked for. The right plate opens on a search for invoice, keeps three matches, and puts the vermilion ring on the row Enter will run. Escape closes it.
How to check it
- Open it with the shortcut. The cursor is in the search field, not on a random row.
- Type until only the matches remain. Enter runs the row with the ring.
- Press Escape while the palette is still rising. It closes at once, and focus returns.
.palette {
animation: palette-in 160ms ease-out;
}
@keyframes palette-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.palette-row[aria-selected="true"] {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.palette { animation: none; }
}