Entra una imagen. Sale una animación.

<canvas id="kiko" width="320" height="320"></canvas>
<script src="https://unpkg.com/@rive-app/canvas"></script>
<script>
  new rive.Rive({
    src: "kiko.riv",
    canvas: document.getElementById("kiko"),
    stateMachines: "CharacterStateMachine",
    autoplay: true,
  });
</script>

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

export function Kiko() {
  const { RiveComponent } = useRive({
    src: "/kiko.riv",
    stateMachines: "CharacterStateMachine",
    autoplay: true,
  });
  return <RiveComponent style={{ width: 320, height: 320 }} />;
}

import RiveRuntime
import SwiftUI

struct Kiko: View {
  @StateObject private var kiko = RiveViewModel(
    fileName: "kiko",
    stateMachineName: "CharacterStateMachine"
  )
  var body: some View {
    kiko.view().frame(width: 320, height: 320)
  }
}

README.mdO dile a tu asistente de programación con IA: “Añade a Kiko a mi pantalla vacía.” El README le explica cómo.