Vercel Search Bar

A search input that mimics the Vercel search bar. Press F to open, Escape to close, and arrow keys to navigate.

How it works

The entire component is built around Framer Motion's layout animations. When you click the search button (or press F), it pops open and morphs into the expanded search panel. The button's width, height, border radius, and position all animate simultaneously to create a sense of continuity that feels much more polished than a simple fade or slide.

Keyboard Navigation

Full keyboard support is baked in:

• F — Opens the search dialog from anywhere on the page
• Escape — Closes and resets the search
• ↑ / ↓ — Navigate through results
• Home / End — Jump to first or last result
• Enter — Select the highlighted item

Selection Indicator

The highlighted item uses an absolutely-positioned background element that animates its y position based on the current index. This is more performant than re-rendering list items and creates that smooth "sliding highlight" effect. The indicator only appears after keyboard or mouse interaction to avoid visual noise on initial render.

Search Filtering

This is a prototype—the search results are a fixed set of mock items rather than a live data source. The useSearchFilter hook filters this static list with relevance-based sorting:

1. Exact title match (highest priority)
2. Title starts with search term
3. Title contains search term
4. Subtitle matches

There's also a "Navigation Assistant" item that incorporates your search term, intelligently positioned based on how relevant the other results are.

Accessibility

The component includes proper ARIA attributes throughout: role="combobox" on the input, role="listbox" on results, aria-activedescendant for screen reader focus tracking, and a live region that announces result counts as you type.