String of Lights

Use it on your site

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

export function StringofLights() {
  const { rive, RiveComponent } = useRive({
    src: '/string-of-lights.riv',
    artboard: 'String of Lights',
    stateMachines: 'State Machine',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.boolean('lightsOn').value = true;

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

Inputs: lightsOn. All on the StringOfLights view model.

How it's built

Six glowing bulbs on a green wire. They sway and twinkle on their own. Tap anywhere and a wave runs along the wire, each bulb swings as it passes and the lights switch off or on one by one. The wire ends level on both sides, so you can repeat the strip across a page.

1. 1
   The wire is skinned to the bulbsEach bulb hangs from its own bone and the wire is skinned to those bones, so a wave travels along it from one side to the other.
2. 2
   Every bulb has its own timingThe sway and the twinkle run on different periods per bulb, so the string never moves as one piece.
3. 3
   The glow is a soft circleA radial gradient sits behind each bulb. It twinkles with the bulb and switches off as the wave reaches it.