A star rating with personality: hovering previews the score, a tap pops the chosen star with a spin and sparks, and earlier stars ripple. Star count, roundness, colours and the rating itself come from data.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1Stars drawn in codeEqual round corners like Figma's star, so roundness is one number.
- 2Hover previews, tap commitsPointer events in the script set a preview and the rating.
- 3Rating is an inputRead it back or set it from your app; the stars follow.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function StarRating() {
const { rive, RiveComponent } = useRive({
src: '/star-rating.riv',
artboard: 'Star Rating',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFFFFB800;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: rating, count, roundness, innerShadow, color, emptyColor. All on the StarRating view model.