Star RewardRive Level Complete Animation

Use it on your site

import { useRive } from '@rive-app/react-canvas';

export function StarReward() {
  const { rive, RiveComponent } = useRive({
    src: '/star-reward.riv',
    artboard: 'Star Reward',
    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('starColor').value = 0xFFF3B534;

  return <RiveComponent style={{ width: '100%', height: 400 }} />;
}

Inputs: stars, spin, play, starColor. All on the StarReward view model.

How it's built

Three soft gold stars for the end of a level. Set the number of stars from your app and each one earned pops into its slot with a few sparks, overlapping into the next. With all three they turn over together, with real thickness, and every earned star gets a shine at the end.

1. 1
   One number drives itstars is a number from 0 to 3. Each star has its own layer that pops in once the number reaches it, so 0, 1, 2 or 3 all just work.
2. 2
   The entrances overlapEach star starts before the last one has settled, which makes the three read as one flowing moment.
3. 3
   The turn has thicknessWith all three, each star turns around its own axis. Darker copies of its outline spread apart while it turns and swap sides at the middle, the same way the coin flips.
4. 4
   Replay is one triggerplay resets and plays it again. A tap on the stars does the same.