Relic Chest

Use it on your site

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

export function Chest() {
  const { rive, RiveComponent } = useRive({
    src: '/treasure-chest-relic.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, mossColor, coinColor, gemColor, glowColor. All on the Chest view model.

How it's built

An ancient treasure chest with moss, a hanging vine and cracked boards. Tap to open, tap again to close. Four material sets, and wood, metal, moss, 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.