Connect Integration
The switch throws, the status swaps to connected, and the row opens to list what it will now sync.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Connect Integration
*
* Flipping the switch does two things at once: the row commits to
* "connected", and the space underneath opens to say what that nowAbout this pattern
Connecting a service is a promise, so the row makes the promise visible. The knob springs across its track and settles without rattling, the status line swaps in a fixed-height slot so the row's baseline never moves, and the space beneath opens to name the three things that will now stay in sync — each line arriving a fraction after the one above it. Turning the switch off takes the panel and the promise back with it, which is the part most implementations skip. The panel is the one height tween here, because opening genuinely is a size change; everything inside it fades at a constant size.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
Enabling an app expands the row to list the permissions it will use.
Related patterns
- Import Data ConnectA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.
- Goal PickerChosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.
- Invite Team SendEach address leaves the compose box and travels into a waiting seat, then marks itself sent.