Name Your Workspace
Typing a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.
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 · Name Your Workspace
*
* The name field and the header it will produce, side by side. Typing
* updates the preview live: the monogram rolls to the new initial, theAbout this pattern
The naming step, answered before it is submitted. A miniature of the real header sits above the field: type, and the monogram rolls to the new initial, the generated address slides in under it, and the tile fills with the accent the moment there is something to name. An availability pill resolves only once the keystrokes stop, because a verdict that flips mid-word is answering a question nobody finished asking. Everything in the preview is text, so nothing scales — the letter travels vertically at a constant size and the address crossfades in a fixed-width slot, which keeps the header's edges still while its contents change.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
The workspace URL is generated live beneath the name field during creation.
Related patterns
- Persona SelectPicking a role lifts that card while the others step back, and a line below says what the answer changed.
- Tour Step HopThe tour tooltip travels to the next control instead of vanishing and popping up somewhere else.
- Tutorial Card PlayThe tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.