Rive

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

function InteractiveAnimation() {
  const { rive, RiveComponent } = useRive({
    src: 'animation.riv',
    stateMachines: 'State Machine 1',
    autoplay: true
  });

  const hoverInput = useStateMachineInput(rive, 'State Machine 1', 'Hover');
  const clickInput = useStateMachineInput(rive, 'State Machine 1', 'Click');

  return (
    <RiveComponent
      onMouseEnter={() => hoverInput && (hoverInput.value = true)}
      onMouseLeave={() => hoverInput && (hoverInput.value = false)}
      onClick={() => clickInput && clickInput.fire()}
      style={{ width: 400, height: 400 }}
    />
  );
}

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

function SimpleAnimation() {
  const { RiveComponent } = useRive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    stateMachines: 'Speed',
    autoplay: true,
  });

  return <RiveComponent style={{ width: 500, height: 500 }} />;
}

// With controls
function ControlledRive() {
  const { rive, RiveComponent } = useRive({
    src: 'animation.riv',
    animations: 'idle',
    autoplay: false,
  });

  useEffect(() => {
    if (rive) {
      rive.play('idle');
    }
  }, [rive]);

  return <RiveComponent style={{ width: 300, height: 300 }} />;
}