Suggestion Chips Cascade
Suggested next actions land in quick succession under the answer, one chip after another.
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, type Variants } from "motion/react";
/**
* Vibary · Suggestion Chips Cascade
*
* AI-suggested next actions landing in quick succession under a
* response, one chip after another.
*About this pattern
What the assistant offers to do next: draft a reply, file a ticket, export the summary. The chips arrive in a fast cascade so the eye tracks along the row instead of meeting a wall of buttons at once, and arriving after the answer marks them as an offer rather than a demand. Each chip rises and fades on its own short spring — never a scale, because a chip is mostly a text label and squashed type reads as cheap.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Follow-up prompts presented under a finished response.
Related patterns
- Autocomplete RiseA completion panel lifts into place under the field, its rows landing a beat apart.
- Prompt Template FillPicking a starter writes its outline into the composer with the blanks lighting up.
- Prompt Submit LiftThe composed prompt lifts out of the field and docks as a sent message while the thread makes room.