Rating Stars Fill
Stars light left to right under the pointer, each settling a fraction after the one before it.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Rating Stars Fill
*
* Stars fill left to right as the pointer sweeps across them, each one
* settling a fraction after the one before it, and the whole row locksAbout this pattern
A rating control is a preview before it is a commitment, so the row has to answer the pointer as it travels. Each star waits its turn by a few hundredths of a second, which is what makes the fill read as a run across the row rather than five things changing at once — the springs themselves are identical. The lit star is a second copy crossfaded over the resting one, because a fill cannot be tweened out of a mixed color while an opacity can and stays composited. The pointer wins while it is over the row and the locked rating is what the row falls back to when it leaves. The word underneath crossfades at one constant size and weight.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Modal sheet
Stars settle individually as the choice is made.
Related patterns
- Field Valid CheckA small mark strokes itself in at the right edge of a field the moment its value becomes acceptable.
- Review SubmitStar fills bloom from the middle, then the form folds away and the posted review rises into its place.
- Batch Action CountTicking rows rolls a count in a floating bar that rises on the first selection.