Christmas Countdown

Use it on your site

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

export function CountdownCalendar() {
  const { rive, RiveComponent } = useRive({
    src: '/countdown-calendar.riv',
    artboard: 'Countdown Calendar',
    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('mainColor').value = 0xFFE7363F;

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

Inputs: targetMonth, targetDay, mainColor. All on the CountdownCalendar view model.

How it's built

A tear-off calendar with snow on top. A short script reads the device clock and shows the days left until the date you set. Tap it and the top sheet rips down and falls, showing the next number.

1. 1
   A script reads the clockOnce a second it works out the time left and writes it to the view model. Change the month and day and the number follows.
2. 2
   The sheet tears on one triggerA tap rips the top sheet down along its torn edge and it falls away, showing the next number underneath.