Answer Rating Flip
The chosen thumb turns onto its filled face and the row hands over to a short thank-you.
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 · Answer Rating Flip
*
* Rating an answer: the chosen thumb turns over onto its filled face and
* settles, the option not taken steps aside, and the row hands itselfAbout this pattern
Feedback on a generated answer, given in one click and acknowledged without ceremony. The thumb turns a half-rotation onto its filled face on a well-damped spring, the option not taken fades and drifts aside, and only once the turn has landed does the row swap its prompt for a brief acknowledgement — so the two events read as cause and effect instead of one blur. The thumb is an icon and may rotate; the copy is text and only fades and slides. Under reduced motion the faces crossfade and nothing turns.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A thumbs row under each reply that fills the chosen icon on click.
Related patterns
- Context Pill AttachA dragged file is caught by the prompt bar and lands inside it as a context pill.
- Prompt Submit LiftThe composed prompt lifts out of the field and docks as a sent message while the thread makes room.
- Prompt Template FillPicking a starter writes its outline into the composer with the blanks lighting up.