Sample Data Populate
Example figures sweep into an empty report so a new account can see what the product does before it has data of its own.
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 type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sample Data Populate
*
* An empty report fills with example figures so a new account can seeAbout this pattern
Not a loading state — a deliberate offer to show the product working. Pressing the action clears each placeholder bar and rises the example value into its place, stepped down the table and across each row so the fill reads as a sweep rather than a flash. Every cell holds both states at a fixed height, so the table never changes size while it is being traded over, and a SAMPLE badge arrives last so nobody mistakes the figures for their own. Values are text: they translate and fade only, because a number that scales while it lands is a number that cannot be read.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
A new grid arriving pre-filled with example records to edit over.
Related patterns
- Seed First ProjectThe blank panel steps aside and a starter project builds itself in its place, task by task.
- 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.