← All patterns

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

React

A finished task fills its box, draws its mark, sweeps a rule through the label, and moves the counter up by one.

onboardingfriendlyenergetic

Setup Complete

React

The last item checks itself off, the checklist clears, and a single confirmation takes its place.

onboardingpremiumcalm
interactive

Connect Integration

React

The switch throws, the status swaps to connected, and the row opens to list what it will now sync.

onboardingfuturisticfriendly
interactive

Seed First Project

React

The blank panel steps aside and a starter project builds itself in its place, task by task.

onboardingenergeticfriendly

Feature Spotlight

React

The surrounding UI dims, a soft ring settles around one control, and a tooltip fades in beside it.

onboardingfriendlyelegant

First Action Nudge

React

After a pause with nothing pressed, a slow halo starts breathing out of the one button worth pressing.

onboardingfriendlysubtle
interactive

Goal Picker

React

Chosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.

onboardingfriendlyenergetic

Import Data Connect

React

A line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.

onboardingfuturisticpremium
interactive

Invite Team Send

React

Each address leaves the compose box and travels into a waiting seat, then marks itself sent.

onboardingenergeticfriendly

Shortcut Teaching Moment

React

A card rises with the shortcut and presses the keys itself, and the control it operates answers a beat later.

onboardingsubtlefuturistic

Notification Opt-in

React

An example alert drops in and two more fan out behind it, then the permission question reads underneath.

onboardingfriendlycalm
interactive

Onboarding Step Transition

React

The next panel enters from the right as the current one leaves left, with the progress bar advancing behind them.

onboardingcalmpremium

Permission Primer

React

The page dims and an explanation rises, with a small diagram filling in to show what the permission would actually put on screen.

onboardingcalmfriendly
interactive

Persona Select

React

Picking a role lifts that card while the others step back, and a line below says what the answer changed.

onboardingpremiumfriendly
interactive

Plan Select Highlight

React

The pressed tier lifts and takes the accent while the feature list below resolves its marks one after another.

onboardingpremiumelegant

Profile Completion Ring

React

The ring around the avatar advances one arc per field, and each row marks itself as the arc reaches it.

onboardingminimalpremium
interactive

Progress Dots Advance

React

The dot for the current step stretches into a pill, and moving on hands that width to the next one.

onboardingminimalfriendly

Resume Where You Left

React

A welcome-back card settles, draws the setup already finished, then marks the step waiting to be picked up.

onboardingcalmpremium
interactive

Sample Data Populate

React

Example figures sweep into an empty report so a new account can see what the product does before it has data of its own.

onboardingenergeticfriendly
interactive

Skip Tour Dismiss

React

Leaving the tour early resolves it in order: the tip drops away, the ring opens and dissolves, the dim lifts last.

onboardingcalmsubtle
interactive

Template Gallery Pick

React

The chosen thumbnail grows in place into a preview of the workspace it would create.

onboardingpremiumelegant
interactive

Tour Step Hop

React

The tour tooltip travels to the next control instead of vanishing and popping up somewhere else.

onboardingfriendlypremium
interactive

Tutorial Card Play

React

The tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.

onboardingpremiumfriendly

Value Prop Carousel

React

Intro slides advance on their own, with the artwork crossfading a beat behind the copy.

onboardingpremiumelegant

Welcome Hero Entrance

React

The first screen assembles in beats: the mark settles, then the headline, the supporting line, and finally the action.

onboardingpremiumelegant
interactive

Name Your Workspace

React

Typing a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.

onboardingpremiumfriendly