Bell Toggle

Use it on your site

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

export function ToggleBell() {
  const { rive, RiveComponent } = useRive({
    src: '/toggle-bell.riv',
    artboard: 'Toggle Bell',
    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('onColor').value = 0xFFF2AE3E;

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

Inputs: on, count, onColor, offColor, outline. All on the ToggleBell view model.

How it's built

Part of the Toggle Icon Set: ten juicy 3D icons, each with one switch. Bind on to your app's state and the icon plays its animation whenever it changes. Both colours come from data, and outline swaps the off state for a clean outline. count sets the number on the badge.

1. 1
   One switchon is a boolean on the view model. Set it from your app, or let a tap flip it.
2. 2
   The shading follows any colourEvery shaded tone is the bound colour with a light or dark layer on top, so any on or off colour keeps the 3D look.
3. 3
   The swap hides in the squashThe icon changes at the bottom of the squash, so you never see the two states on top of each other.
4. 4
   The clapper is its own pieceIt hangs inside the bell, in front of the dark opening, and swings a beat after the bell, a little further.