CoinRive Coin Flip Animation

Use it on your site

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

export function Coin() {
  const { rive, RiveComponent } = useRive({
    src: '/coin.riv',
    artboard: 'Coin',
    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('coinColor').value = 0xFFF7B933;

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

Inputs: collect, coinColor. All on the Coin view model.

How it's built

A soft gold coin with a star on its face. It floats gently. Tap it and it crouches, jumps, flips twice and lands with a squash, while a few sparks fly out and fade. Set any colour, and swap the star for your own symbol in the Symbol component.

1. 1
   The flip is three shapesA front, a darker back and a flat edge between them. The front and back squash and move apart while the edge grows, and halfway through they swap sides on a hold key, so the coin keeps turning the same way.
2. 2
   The star is a componentIt lives on its own artboard called Symbol. Swap what's inside and every coin updates, with no animation to redo.
3. 3
   The sparks ride with the jumpThey travel with the coin and are gone before the top, so they only add to the moment it leaves the ground.
4. 4
   The colour is one propertyThe shading is black and white at low opacity over one colour, so gold, silver or anything else still looks right.