Filtered to Nothing
The reset action slides in beside the chips, and the chips give one small nudge to name the cause.
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 · Filtered to Nothing
*
* An empty result set caused by filters is not the same as an empty
* database, and the motion says so: the reset action slides in besideAbout this pattern
A list emptied by filters looks identical to a list with no data in it, and the difference decides what the reader does next. So the motion connects the two: the empty block settles in, the reset action slides into the chip row rather than under the message, and the chips themselves lift two pixels and come back once — a pointer at the cause, not a shake at the reader. Clearing drops the chips out and brings the rows back inside the same frame, which keeps the whole exchange in one place. Reduced motion drops the nudge outright; the sentence already names the cause.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
An over-filtered issue view offers a clear action next to the active filter pills.
Related patterns
- No Results SuggestAn empty result set settles into a quiet mark, then offers queries worth trying instead.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.