Command Palette

The Cmd+K window that makes any product feel fast

Create a command palette (Cmd+K). A search-driven overlay opened with Cmd+K / Ctrl+K (register a global keydown listener; also openable from a search button showing the ⌘K shortcut in a small mono badge). Opening: backdrop (rgba black ~40% with backdrop-filter: blur(4px)) fades in over 160ms; the panel drops in near the top of the viewport (not centered vertically), animating from opacity 0, scale 0.96, translateY(-6px) to full, 200ms ease-out. Focus moves straight into the search input. Behavior: typing filters the command list live; filtered results re-enter with a tiny stagger (30ms). ArrowUp/ArrowDown move the highlighted row, Enter runs it, Escape closes. Clicking the backdrop closes; clicking the panel does not. Rows: icon + label, rounded, with an accent-tinted hover/highlight background. Accessibility: role='dialog' on the panel, focus trapped inside while open, focus returned to the trigger on close, and an empty state ('No results') when the filter matches nothing. When prefers-reduced-motion is enabled, open and close with instant plain fades. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data