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 demo is a search for "invoice", three result rows, and a vermilion ring on the second row. That ring is the row Enter will run. The line under the list is the Escape path.
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; }
}