No Results Suggest
An empty result set settles into a quiet mark, then offers queries worth trying instead.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · No Results Suggest
*
* An empty result set is a dead end unless it offers a way out. The mark
* settles once, the sentence naming the query follows it, and the queries
* worth trying instead arrive last — so the eye lands on the explanationAbout this pattern
The most common empty state in any product, and the one most often left as a bare sentence. A line-art mark settles once, the query that returned nothing is echoed back underneath it, and the queries worth trying instead arrive last in a short cascade — order that puts the explanation before the options, so the reader understands the dead end before being handed a way out of it. Nothing loops and nothing bounces: the block has to be readable while someone is still typing in the field above it. Reduced motion keeps the same order and drops only the travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Search results
The empty result set is replaced by a shorter query the reader can take.
Related patterns
- Empty CartThe cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.
- Error RecoveryA failed panel settles without alarm, and the retry glyph turns exactly once per attempt.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.