Tall Gift Box

Use it on your site

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

export function Gift() {
  const { rive, RiveComponent } = useRive({
    src: '/gift-tall.riv',
    artboard: 'Gift',
    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('wrapColor').value = 0xFFF4414C;

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

Inputs: wrapColor, ribbonColor. All on the Gift view model.

How it's built

A tall gift box with four animations. The lid shoots off the top, gets thrown aside, the whole box tears apart, or the gift falls from above and lands. Set the wrap and the ribbon, the shading follows.

1. 1
   Two colours, the rest is shadeYou set the wrap and the ribbon. Every shadow is a dark layer on top, so any colour keeps the shading.
2. 2
   Lid, bow and box move apartThe bow lags behind the lid and rings out, which is where most of the life comes from.
3. 3
   Every move has its own curveA hard release on the launch, gravity on the fall, an elastic settle on the landing.
4. 4
   A tap flips one booleanThe opening is an enum, so you can pick it and fire it from code too.