A treasure chest that opens on tap: the lid swings up, rays of light and a glow rise out of it, and a pile of coins sits inside. Tap again to close it. The wood colour comes from data binding, and it plays its own open and close sounds.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1Every part is its own artboardBox, lid, lock, coins, glow and rays are components, so you can redraw one without touching the animation.
- 2One trigger opens and closes itToggle flips the chest between closed and open. Fire it from a tap or from your own code.
- 3The wood is one bound colourChange woodColor and every plank follows, shading included.
- 4Sound is part of the fileThe open and close sounds are audio events on the timeline, so they stay in sync wherever the file plays.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function Chest() {
const { rive, RiveComponent } = useRive({
src: '/treasure-chest.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.color('woodColor').value = 0xFF28896C;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: toggle, woodColor. All on the Chest view model.