Snow Button

Use it on your site

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

export function SnowButton() {
  const { rive, RiveComponent } = useRive({
    src: '/snow-button.riv',
    artboard: 'Snow Button',
    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('buttonColor').value = 0xFFE7363F;

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

Inputs: label, buttonColor, cornerRadius. All on the SnowButton view model.

How it's built

A website button with a soft layer of snow on top and icicles hanging behind it. Press it and the snow rides down with the button while the drips and icicles swing a beat late. Set the colour and the corner radius.

1. 1
   Colour and corners are inputsSet the button colour and the corner radius, and the snow stays on top.
2. 2
   The snow rides the pressIt goes down with the button, and its drips stretch a beat late on a small bone.
3. 3
   Icicles hang behind the buttonThey sit under its edge and swing out just after the press.
4. 4
   Your own font needs the .revThe .riv ships with Montserrat. To use your font, open the .rev in Rive and swap it.