Invite Team Send
Each address leaves the compose box and travels into a waiting seat, then marks itself sent.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Invite Team Send
*
* Sending invitations moves the chips rather than replacing them: each
* address leaves the compose box and travels into a waiting seat below,About this pattern
Sending invitations without redrawing them. The chips in the compose box are the same elements that end up in the invited list — Motion measures both positions and moves each one, so the eye can follow a specific address from where it was typed to where it landed. Departures are staggered by a beat, and the confirmation only appears once a chip has settled, which makes the send read as three things happening rather than one blur. The seats are reserved from the start and the chips never change size, so the card holds its height and the addresses stay readable the whole way down.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Pending recipients resolve into confirmed members with a per-row status.
Related patterns
- Seed First ProjectThe blank panel steps aside and a starter project builds itself in its place, task by task.
- Goal PickerChosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.
- Sample Data PopulateExample figures sweep into an empty report so a new account can see what the product does before it has data of its own.