Ember Chest

Use it on your site

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

export function Chest() {
  const { rive, RiveComponent } = useRive({
    src: '/treasure-chest-ember.riv',
    artboard: 'Chest',
    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('toggle').trigger();

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

Inputs: toggle, woodColor, metalColor, lavaColor, coinColor, gemColor, glowColor. All on the Chest view model.

How it's built

A dark treasure chest with horns, spikes and lava cracks that pulse slowly. Tap to open, tap again to close. Four material sets, and wood, metal, lava, coins, gem and glow all come from data binding.

1. 1
   Every part is its own artboardThe closed chest, the open chest, the rays, the glow and the sparkles are components, so you can redraw one without touching the animation.
2. 2
   One trigger opens and closes itToggle flips the chest between closed and open. Fire it from a tap or from your own code.
3. 3
   One colour per materialChange the wood colour and its whole shading follows, shadows and highlights included. A small script keeps them in key.
4. 4
   Sound is part of the fileThe open and close sounds are audio events on the timeline, so they stay in sync wherever the file plays.