Snow Globe

Use it on your site

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

export function SnowGlobe() {
  const { rive, RiveComponent } = useRive({
    src: '/snow-globe.riv',
    artboard: 'Snow Globe',
    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('shake').trigger();

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

Inputs: shake, snow. All on the SnowGlobe view model.

How it's built

A snow globe with three scenes inside: gifts, a tree with gifts, or a big tree. Snow falls by itself. Tap it and the globe rattles, everything inside hops, and the snow turns into a whirlpool that fills the glass. You set how much snow falls.

1. 1
   The snow is one short scriptA single script draws every flake, so the amount is one number you can change while it plays.
2. 2
   Snow goes behind and in frontThe same script runs twice with the same seed, one layer behind the contents and one in front, so a flake passes behind the gift and then over it.
3. 3
   The middle spins fastestDuring a shake each flake circles the centre, and the closer it is, the faster it turns. That is what makes it read as a whirlpool.
4. 4
   One trigger starts it allShake rattles the globe, makes the contents hop a little out of time and starts the whirl. Fire it from a tap or from your own code.