Review Submit
Star fills bloom from the middle, then the form folds away and the posted review rises into its place.
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 · Review Submit
*
* Rating fills bloom from the middle of each star; submitting folds the
* form away upward and the posted review rises into the space it left.About this pattern
Rating and posting treated as one moment. Each star keeps a static outline while a filled copy blooms out of its centre, so the row holds its rhythm as the score changes and the score word crossfades in a fixed slot rather than shoving the stars sideways. On submit the form's rows leave upward in the order they were read and the posted card rises into the space. Both states share one fixed frame, so nothing around the widget reflows and no glyph is scaled by a container resizing.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Stay ratings fill from the centre of each star as you drag across the row.
Related patterns
- Receipt UnrollThe payment clears and the receipt unrolls beneath it, line items settling in behind the torn edge.
- Rating Stars FillStars light left to right under the pointer, each settling a fraction after the one before it.
- Add to Cart FlyThe product tile arcs from the card into the cart glyph, and the badge ticks over on arrival.