Christmas Tree

Use it on your site

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

export function Tree() {
  const { rive, RiveComponent } = useRive({
    src: '/christmas-tree.riv',
    artboard: 'Tree',
    stateMachines: 'State Machine',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.boolean('lightsOn').value = true;

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

Inputs: lightsOn. All on the Tree view model.

How it's built

A Christmas tree with ornaments, candy canes and twinkling lights. It sways on its own and the ornaments swing with it. Tap it and the tree shakes, the star hops and the snow falls off. Tap again and the snow comes back.

1. 1
   The tree bends on bonesFour bones run up the trunk and every shape is skinned to them, so the tip moves most and the base barely moves.
2. 2
   Each piece has its own swingOrnaments and candy canes hang from their own pivots on the bones, so they follow the tree and swing a little late.
3. 3
   Snow is one booleanA tap flips snowy. False drops the snow with squash and stretch, true grows it back. Your app can set it too.
4. 4
   Lights are one boolean tooSix groups of bulbs blink on one looping timeline. Set lightsOn to false and they switch off.