Message Send
The composed line lifts out of the input and lands as the newest bubble.
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, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Message Send
*
* The composed line lifts out of the input and lands as the newest
* bubble. The composer empties at the instant the bubble appears, soAbout this pattern
Sending is the one moment in a messaging app where the user is certain something happened, and the motion's job is to confirm where it went. The composer empties at the instant the bubble appears below the thread and rises into place, so the eye follows one object rather than watching text vanish in one place and reappear in another. The bubble travels and fades; it never scales, because scaling a bubble scales the words inside it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
The composed line clears as the bubble arrives at the end of the thread.