Goal Picker
Chosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.
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 · Goal Picker
*
* A grid of goals where any number can be chosen. Each pick paints its
* tile and settles a mark into the corner; the continue action risesAbout this pattern
The multi-select question, where the answer can be any number of things. Each tile lifts a pixel or two and fades an accent layer in over itself — a layer rather than an animated background-color, because theme-adaptive neutrals are color-mix() values and no engine can interpolate those — while a mark springs into its corner. The label never moves or resizes. The payoff is the action: it rises out of a row whose height is already reserved, so the grid above it cannot shift, and it leaves the same way if every tile is cleared. Nothing in the grid scales, because everything in the grid is text.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
Selectable tiles that mark themselves while the continue action waits below.
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.
- Seed First ProjectThe blank panel steps aside and a starter project builds itself in its place, task by task.