Import Data Connect
A line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.
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 · Import Data Connect
*
* Two services are linked: a line draws itself between their marks,
* records run along it, and the destination takes a check once theAbout this pattern
Moving an account's existing work into a new product, shown as a link being made rather than a spinner being watched. The two marks settle first, then the connector is written across the gap with an animated pathLength, then records run along it on a linear loop — linear because a record in transit has no reason to ease. The loop exists only while the transfer is running: when the phase ends the packets unmount, so nothing keeps circulating behind a finished import. The destination takes a check on a spring and the status line swaps at a constant font size. Both marks are invented placeholders, deliberately generic shapes rather than anyone's logo.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Two app marks joined by an animated link while an account is connected.
Related patterns
- Connect IntegrationThe switch throws, the status swaps to connected, and the row opens to list what it will now sync.
- Profile Completion RingThe ring around the avatar advances one arc per field, and each row marks itself as the arc reaches it.
- Setup CompleteThe last item checks itself off, the checklist clears, and a single confirmation takes its place.