PadlockRive Lock and Unlock Animation

Use it on your site

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

export function Padlock() {
  const { rive, RiveComponent } = useRive({
    src: '/padlock.riv',
    artboard: 'Padlock',
    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('bodyColor').value = 0xFF2C98A2;

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

Inputs: shakeFirst, shake, bodyColor, shackleColor. All on the Padlock view model.

How it's built

A soft, rounded padlock. Tap it and the shackle jumps up and the short leg comes out of the body. Tap again and it snaps shut. Set any colour, shake it for a wrong attempt, or have it shake before it opens.

1. 1
   The shackle is its own pieceIt sits behind the body, which masks it. One leg is long and one is short, so lifting it straight up is all it takes to open.
2. 2
   Open is one booleanA tap flips it, and your app can set it too. The body squashes as the shackle jumps, and again when it snaps shut.
3. 3
   A wrong attempt is one triggerShake rattles the whole lock. Turn on shakeFirst and it shakes before every opening.
4. 4
   The shading follows the colourEach shade is black or white at low opacity over the same colour, so any colour you set still looks right.