Sale Badge

Use it on your site

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

export function SaleBadge() {
  const { rive, RiveComponent } = useRive({
    src: '/sale-badge.riv',
    artboard: 'Sale Badge',
    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('badgeColor').value = 0xFFE7363F;

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

Inputs: percent, badgeColor, textColor. All on the SaleBadge view model.

How it's built

A round sale badge with a pile of snow on top. It drops in with a stamp, and a tap stamps it again. Type your own discount and set the colours of the badge and the text.

1. 1
   The text is one stringpercent is bound to the label, so any discount fits without opening the file.
2. 2
   The stamp is one triggerstamp squashes the badge and the snow lands a beat later. Fire it from a tap or when the sale starts.