Preview on hover, don't wait for the click. Stars should fill ahead of the cursor so users see the value they're about to commit — a widget that only reacts on click hides the target until it's too late.
Keep the preview state separate from the committed value. When the pointer leaves without clicking, snap the display back to the saved rating; a naive build leaves it stuck on the last hovered star.
For averages, render fractional stars — a 4.4 is four full stars plus a fifth clipped to 44%. Rounding it up to five full stars is a lie that inflates perceived quality.
Stagger the fill ~30ms per star, left to right. Popping all five at once feels flat and lifeless; the sequential sweep feels alive.
Use fractional fill for input precision too — clumsy whole-star jumps read as cheap next to a smooth half-star land.
Stars are the input; pair them with a summary view (an average ring plus a distribution breakdown) to communicate the aggregate score at a glance.
Do / Don't
Do: Fill stars ahead of the cursor on hover so the value previews before commit
Do: Render partial fills so a 4.4 shows four stars plus a 44%-filled fifth
Do: Stagger the fill roughly 30ms per star, left to right, when a rating commits
Don't: Round averages up to full stars — it misrepresents the real score
Don't: Leave the preview stuck on the hovered value after the pointer leaves
Don't: Pop all five stars simultaneously — it reads as flat and dead
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
