Invite Code Accept
A valid invite code turns the field into the workspace tile it lets you into.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Invite Code Accept
*
* A valid invite code stops being a string and becomes the place it lets
* you into: the field grows into a workspace tile in one move, so theAbout this pattern
An invite code is an abstraction until it resolves into a place. Rather than clearing the field and rendering a result somewhere else, the field itself grows into the workspace tile: same container, same position, contents crossfading inside it. The height change tweens on an ease because it is a real size change, while the tile contents rise on a spring that lands without a rebound — the workspace name is text, and text that bounces reads as cheap. A short checking state with a rotating arc holds the button width steady so nothing reflows while the code is verified, and the confirmation check draws last.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
A code screen that resolves into the named workspace before you enter it.
Related patterns
- Team Seat JoinA teammate joins the avatar stack while the seat count rolls and the usage bar grows.
- Invite Team SendEach address leaves the compose box and travels into a waiting seat, then marks itself sent.
- Signup Progress MeterA slim meter advances as each account requirement is satisfied, and every row marks itself as it passes.