Gingerbread House

Use it on your site

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

export function GingerbreadHouse() {
  const { rive, RiveComponent } = useRive({
    src: '/gingerbread-house.riv',
    artboard: 'Gingerbread House',
    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('lightColor').value = 0xFFFDC947;

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

Inputs: lightsOn, lightColor. All on the GingerbreadHouse view model.

How it's built

A gingerbread house with candy canes, gumdrops and a snowy roof. Tap it and it hops, the snow on the roof settles, the gumdrops jiggle late, the door peeks open and the chimney puffs. Tap again to switch the windows off. You pick the colour of the light.

1. 1
   Everything follows the hopThe house jumps first. The roof snow, the gumdrops and the door each start a few frames after it, so the whole thing feels soft.
2. 2
   The windows are one booleanlightsOn turns the rooms on with a short flicker. A tap flips it, and your app can set it too.
3. 3
   The light is one colourlightColor drives the windows, so the house can glow warm, cold or any colour you want.