Hanging Ornament

InteractiveData BindingFree

A Christmas ball on a string. Tap it and it swings. Hang it from the top of a page.

← Prev Next →

Live

Tap the ball

Get the file

Runtime

.riv

Ready to use in your app or website.

Free

Editable

.rev

Open it in the Rive editor and change anything.

Free

Learn to build it

Full access

Build this yourself, step by step. Every file in the library is included.

Courses from $119

See the courses

Use it in your own products and client work. Please don't resell or share the files themselves.

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

export function HangingOrnament() {
  const { rive, RiveComponent } = useRive({
    src: '/hanging-ornament.riv',
    artboard: 'Hanging Ornament',
    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('ballColor').value = 0xFFE73D40;

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

Inputs: ballColor, capColor. All on the HangingOrnament view model.