Autocomplete Rise
A completion panel lifts into place under the field, its rows landing a beat apart.
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 { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Autocomplete Rise
*
* The completion list that appears under a field once the model has
* something to offer: the panel lifts into place and its rows follow aAbout this pattern
What a predictive field does the moment the model has something to offer. The panel lifts a few pixels into position on a well-damped spring while its rows resolve top to bottom, close enough together to read as one arrival but far enough apart that the eye starts at the first row. The rows are text, so they translate and fade and never change size, and the panel is page-opaque because it covers live content. Matched characters carry the accent so the reader can see why each row is there.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Search results
Predictions appear under the box with the typed prefix distinguished.
Related patterns
- Context Pill AttachA dragged file is caught by the prompt bar and lands inside it as a context pill.
- Inline Completion GhostA faint prediction appears ahead of the caret and firms up to real content when it is accepted.
- Suggestion Chips CascadeSuggested next actions land in quick succession under the answer, one chip after another.