Prompt Submit Lift
The composed prompt lifts out of the field and docks as a sent message while the thread makes room.
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 · Prompt Submit Lift
*
* Sending a prompt as a handoff rather than a cut: the composed text
* lifts out of the field, the thread above makes room, and the messageAbout this pattern
Submitting a prompt is the moment a draft stops being yours and becomes part of the record, and a field that simply blanks throws that away. Here the composed text rises out of the input and fades as it goes, the thread above shifts up on a position-only layout animation, and the message docks a beat later at the bottom of the conversation. Position-only is the important part: the bubbles move without their boxes being interpolated, so no glyph is stretched by the reflow.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
The composed prompt leaves the composer and settles into the thread as the newest turn.