Add ActionAdd Plus Action: Rive Animated Icon

Use it on your site

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

export function ActionAdd() {
  const { rive, RiveComponent } = useRive({
    src: '/action-add.riv',
    artboard: 'Action Add',
    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('color').value = 0xFF6BBB52;

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

Inputs: play, color. All on the ActionAdd view model.

How it's built

Part of the Action Icon Set: ten juicy 3D icons that play their action when your app fires play, or on a tap. The main colour comes from data and the shading follows it. Every animation ends exactly where it started, so it can play again and again.

1. 1
   One triggerplay is a trigger on the view model. Fire it from your app when the action happens, or let a tap fire it.
2. 2
   The shading follows the colourEvery shaded tone is the bound colour with a light or dark layer on top, so any colour keeps the 3D look.
3. 3
   It loops cleanlyThe last frame matches the first, so firing it twice in a row never jumps.