Mention Autocomplete
Typing @ raises a people list that narrows with every keystroke.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState, type KeyboardEvent as ReactKeyboardEvent } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Mention Autocomplete
*
* Typing @ raises a people list that narrows with every keystroke.
* The list is being read while it changes, so rows that stop matchingAbout this pattern
The list is being read while it changes, which makes removal the delicate part: rows that no longer match are popped out of flow and the survivors slide up into the gap rather than the whole list re-rendering in place. The highlight is a single shared element that travels between rows, so arrowing down reads as one object moving instead of two rectangles blinking. Text keeps a constant size throughout — the panel resizes around it, never with it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
A people list above the composer that filters down as the name is typed.