Diseño
Rive
Diseño y ejecución de animaciones interactivas en tiempo real.
Editor y runtimes para crear gráficos vectoriales animados, máquinas de estados e interacciones que se ejecutan dentro de aplicaciones.
Ir al sitio oficialFicha abierta
Para qué sirve y cómo encaja
Editor y runtimes para crear gráficos vectoriales animados, máquinas de estados e interacciones que se ejecutan dentro de aplicaciones.
Encaja en iconos animados, onboarding, personajes e interfaces interactivas donde el estado de la app debe controlar el movimiento.
No sustituye un editor de vídeo ni es necesario para animaciones CSS simples o contenido puramente lineal.
Uso en tu proyecto
Instalación e importación
Comandos y fragmentos tomados de la documentación oficial. Elige tu caso, cópialos tal cual o pásale el prompt a tu agente.
npm install @rive-app/canvasimport { Rive } from "@rive-app/canvas";
new Rive({
src: "/animaciones/boton.riv",
canvas: document.querySelector("canvas"),
autoplay: true,
});Prompt para que tu agente lo instale
Pega esto en Cursor, Claude Code, Codex u otro agente de código:
Instala Rive en este proyecto (contexto: sin framework). Documentación oficial: https://rive.app/docs/runtimes/web. Comando verificado: `npm install @rive-app/canvas`. Haz solo la instalación o importación base indicada en esta pestaña; no asumas stack ni configuración del proyecto. Cuando termines, pregunta al usuario cómo quiere integrarlo o qué contexto necesitas para los siguientes pasos.Planes y modelos
Cómo se paga y qué incluye cada opción
- 01Gratis
Free
0 $ por asiento: puedes crear y aprender sin pagar, pero no publicar en producción.
- 02Cadet
Cadet
9 $ por asiento al mes con un máximo de tres asientos; es el escalón mínimo para publicar.
- 03Voyager
Voyager
32 $ por asiento al mes hasta veinticinco asientos, con funciones de equipo.
- 04Enterprise
Enterprise
120 $ por asiento al mes, obligatorio para empresas con más de diez millones de dólares de facturación.
Funcionalidades
Qué puedes hacer con ella
- 01
State machines
Define estados, inputs y transiciones para animaciones controladas por la interfaz.
- 02
Runtimes multiplataforma
Reproduce archivos en web, Flutter, Apple, Android, React Native y motores compatibles.
- 03
Editor vectorial
Diseña, riggea y anima recursos sin exportar secuencias de imágenes.
Cuándo usarla
Dónde encaja y dónde no
Te conviene si…
Encaja en iconos animados, onboarding, personajes e interfaces interactivas donde el estado de la app debe controlar el movimiento.
Mejor otra opción si…
No sustituye un editor de vídeo ni es necesario para animaciones CSS simples o contenido puramente lineal.