Types of planes animation for React, Angular, Vue etc

This is a Rive animation that you can change at runtime the state. A use case would be for different levels of packages or products

You can use Rive animation with different specific Rive runtimes for Web(JS native), React, Vue, Angular.

It has 3 states(paper_plane, propeller_plane, jet_plane) that you can use for example like this with React:

  const paperPlane = useStateMachineInput(rive, "Planes", "Paper_plane");
  const propellerPlane = useStateMachineInput(rive, "Planes", "Propeller_plane");
  const jetPlane = useStateMachineInput(rive, "Planes", "Jet_plane");

I made a codesandbox that is shared in the details.

You can also look at the Rive docs: https://help.rive.app/runtimes/overview#installation-and-getting-started

Pay nothing or as much as you want.