Seed First Project
The blank panel steps aside and a starter project builds itself in its place, task by task.
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 · Seed First Project
*
* An empty workspace fills itself. The blank panel steps aside, a
* starter project takes its place, and its tasks arrive in the orderAbout this pattern
The first thing a new account needs is something to look at. Pressing the empty state's button sends the blank panel up and out on a short eased exit, then the project card lands on a spring and its tasks follow in the order they would have been written — a build, not a page load, which is what makes a seeded workspace feel authored rather than faked. The frame around both states has a fixed height so nothing jumps as one replaces the other, and every task row translates and fades only, because rows are text. Reduced motion keeps the order of arrival and drops the travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
An empty page replaced by a template whose blocks arrive in reading order.
Related patterns
- Invite Team SendEach address leaves the compose box and travels into a waiting seat, then marks itself sent.
- Sample Data PopulateExample figures sweep into an empty report so a new account can see what the product does before it has data of its own.
- Goal PickerChosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.