Context Pill Attach
A dragged file is caught by the prompt bar and lands inside it as a context pill.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Context Pill Attach
*
* Dragging a file onto the prompt bar. Release it over the bar and it
* stops being a file: it becomes a context pill sitting inside theAbout this pattern
Attaching context is a promise that the assistant will actually read the thing, so the drop has to be unambiguous. The bar arms as the card crosses the threshold, the card leaves downward on release, and the pill lands inside the bar on a tightly damped spring while a ring at the bar edge fades once to confirm the catch. Nothing about the card scales while it is held — only its shadow answers the grab, because a filename stretched under the pointer is the cheapest looking drag there is.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Files dropped on the composer become compact chips inside the prompt before it is sent.
Related patterns
- Autocomplete RiseA completion panel lifts into place under the field, its rows landing a beat apart.
- Prompt Submit LiftThe composed prompt lifts out of the field and docks as a sent message while the thread makes room.
- Prompt Template FillPicking a starter writes its outline into the composer with the blanks lighting up.