Onboarding motion patterns
First-run flows, tours and setup checklists — motion that carries someone from empty to productive.
React + Motion · new patterns added daily
Setup Checklist Complete
ReactA finished task fills its box, draws its mark, sweeps a rule through the label, and moves the counter up by one.
Setup Complete
ReactThe last item checks itself off, the checklist clears, and a single confirmation takes its place.
Connect Integration
ReactThe switch throws, the status swaps to connected, and the row opens to list what it will now sync.
Seed First Project
ReactThe blank panel steps aside and a starter project builds itself in its place, task by task.
Feature Spotlight
ReactThe surrounding UI dims, a soft ring settles around one control, and a tooltip fades in beside it.
First Action Nudge
ReactAfter a pause with nothing pressed, a slow halo starts breathing out of the one button worth pressing.
Goal Picker
ReactChosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.
Import Data Connect
ReactA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.
Invite Team Send
ReactEach address leaves the compose box and travels into a waiting seat, then marks itself sent.
Shortcut Teaching Moment
ReactA card rises with the shortcut and presses the keys itself, and the control it operates answers a beat later.
Notification Opt-in
ReactAn example alert drops in and two more fan out behind it, then the permission question reads underneath.
Onboarding Step Transition
ReactThe next panel enters from the right as the current one leaves left, with the progress bar advancing behind them.
Permission Primer
ReactThe page dims and an explanation rises, with a small diagram filling in to show what the permission would actually put on screen.
Persona Select
ReactPicking a role lifts that card while the others step back, and a line below says what the answer changed.
Plan Select Highlight
ReactThe pressed tier lifts and takes the accent while the feature list below resolves its marks one after another.
Profile Completion Ring
ReactThe ring around the avatar advances one arc per field, and each row marks itself as the arc reaches it.
Progress Dots Advance
ReactThe dot for the current step stretches into a pill, and moving on hands that width to the next one.
Resume Where You Left
ReactA welcome-back card settles, draws the setup already finished, then marks the step waiting to be picked up.
Sample Data Populate
ReactExample figures sweep into an empty report so a new account can see what the product does before it has data of its own.
Skip Tour Dismiss
ReactLeaving the tour early resolves it in order: the tip drops away, the ring opens and dissolves, the dim lifts last.
Template Gallery Pick
ReactThe chosen thumbnail grows in place into a preview of the workspace it would create.
Tour Step Hop
ReactThe tour tooltip travels to the next control instead of vanishing and popping up somewhere else.
Tutorial Card Play
ReactThe tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.
Value Prop Carousel
ReactIntro slides advance on their own, with the artwork crossfading a beat behind the copy.
Welcome Hero Entrance
ReactThe first screen assembles in beats: the mark settles, then the headline, the supporting line, and finally the action.
Name Your Workspace
ReactTyping a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.