Slot Machine

Use it on your site

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

export function SlotMachine() {
  const { rive, RiveComponent } = useRive({
    src: '/slot-machine.riv',
    artboard: 'Slot Machine',
    stateMachines: 'State Machine',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.trigger('spin').trigger();

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

Inputs: spin, winChance, color1, color2, color3, color4, color5, leafColor, cabinetColor, signColor, accentColor, buttonColor, buttonTextColor, reelColor, winBandColor, titleColor, title, winText, buttonText. All on the SlotMachine view model.

How it's built

A flat slot machine with three reels that stop one after another, a near miss when two match, and a jackpot moment on a win. Four themes, and the colours and text all come from data binding. The editable file holds all 13 icons, so swap in your own there.

1. 1
   A script draws the reelsA Node Script spins each reel as a curved drum, with motion blur, a brake and a small settle when it lands.
2. 2
   Spin is one triggerThe button, the lever or your own code all fire the same trigger. The file fires win and lose back, so you can add sound or a reward.
3. 3
   Your code can pick the resultSet result1, result2 and result3 to force an outcome, or leave them at 0 and let winChance decide.
4. 4
   Swap the icons in the editable fileAll 13 icons are their own artboards. Open the .rev in the Rive editor, redraw one or add your own, and the reels pick it up.