Instant Search Dropdown

Create an instant search dropdown. A search input with a magnifier icon. From the second character typed, a results panel springs open beneath it (from 6px above at 98% scale, stiffness 420, damping 30, transform-origin top, soft shadow), and the input's border tints to the accent color while results are showing. Wait for the second character on purpose: one character matches almost everything, so a panel that opens on it is noise. Results cascade in from 6px below with a 0.07s stagger. Each row shows the result title with the matching substring highlighted (wrap the match in a mark with an accent background at ~22% opacity and 3px radius, keeping the text color) and a small monospace section tag on the right. Highlight only the matched substring, never the whole row, or you have hidden the one thing the person was looking for. The panel updates as the query grows; when the input empties, the panel collapses (150ms fade-up). Opening and closing are deliberately not symmetrical - results spring in over about a third of a second and the panel leaves in 150ms, because matching the two makes dismissal feel like the interface is arguing with you. Debounce real queries (~150ms) and cap visible results (5-7). The input is a real input: it fills when a person types and stays empty until then. Sample rows are welcome; a timer that types into it is not. Accessibility: wire the input to the list with role="combobox", aria-expanded and aria-controls, rows as role="option" with aria-selected on the highlighted one; support ArrowUp/Down and Enter. Search is the one control people reach for the keyboard on. If prefers-reduced-motion is set, show and update results instantly with no springs or stagger. Make it mine: - Set the input's placeholder to "Search anything…". - Use "moti" as the example query when showing the highlighted match. The input itself starts empty and fills only when a person types. - Make the first sample row read "Motion presets". - Make the second sample row read "Motion tokens". - Make the third sample row read "Reduced motion guide". 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.