GiroscopePage

Vite + React + TypeScript app with the Rive WebGL2 runtime.

Scripts

npm run dev
npm run build
npm run preview

Using your own .riv file

1. Put the file in public/, e.g. public/gyro.riv.
2. Point useRive at it:

const { RiveComponent } = useRive({
  src: '/gyro.riv',
  stateMachines: 'State Machine 1',
  autoplay: true,
})

The canvas sizes itself from .rive-stage. Keep that container’s width and height defined or nothing will render.

Docs: Rive React runtime