Command palette demo

Use it for

• Landing page sections that show off keyboard first workflows
• Product tours for apps with a command menu
• In app palettes that should feel quick and precise

Avoid

• Auto typing inside a real app, where it would fight the user
• Lists of hundreds of commands without grouping or virtualising

How it works

Results filter on every keystroke, and a layout effect sets the list box height to its inner content before paint, so a CSS height transition smooths every change. One absolutely positioned highlight reads the active row's offsetTop and height and moves with a transform transition, so it glides instead of jumping between rows. An idle script on chained timeouts types a query, steps the highlight and runs a command; any pointer, focus or key event stops it for good. Running a command scales the row down briefly and shows a confirmation that slides over the footer.

Accessibility

The input is a combobox with aria-activedescendant pointing at the active option in a labelled listbox, so arrow keys and Enter work as expected and screen readers follow the highlight. Confirmations land in a status region. Reduced motion skips the auto typing, shows a filtered query and drops the height, highlight and toast animations.