Search Start Prompt
Before the first keystroke, the rule under the field draws out and starting points arrive beneath it.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Search Start Prompt
*
* The state before the first keystroke. The rule under the field draws
* out to the right, the way a cursor would travel, and the startingAbout this pattern
A field with nothing typed in it is an empty state that most products leave blank. This one gives the reader somewhere to begin: the rule under the field draws out to the right, in the direction a caret would travel, and the starting points arrive under it in reading order — what this person looked for recently, then what their team looks for. Picking one writes the term into the field in the same cell it was prompting from, so the panel holds its size between prompt and query. Nothing springs, because this is read while someone is deciding what to type.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Search results
Focusing the field before typing surfaces recent lookups beneath it.
Related patterns
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.
- Chart No DataThe axes extend from the origin and a flat dashed baseline runs across, so an empty range still looks like a chart.
- Deleted Item TombstoneA removed row leaves a stub holding its slot open, with a hairline showing how long undo is on offer.