¿Qué es Rive? La animación interactiva explicada

¿Qué es Rive?

Rive es una plataforma de animación pensada para gráficos interactivos. Tiene dos mitades. El editor de Rive es donde los diseñadores dibujan formas, riggean personajes con huesos, crean animaciones con keyframes y las conectan entre sí. Los runtimes de Rive son bibliotecas que cargan el archivo exportado dentro de tu producto y lo renderizan en tiempo real.

La diferencia con un video o un GIF es que una animación de Rive no es una secuencia fija de fotogramas. El runtime dibuja formas vectoriales en cada fotograma, y una máquina de estados dentro del archivo decide qué animación se reproduce, cómo se mezclan las animaciones y cómo reaccionan a los valores que envía tu código. Una mascota de marca puede estar en reposo (idle), pasar a un loop de carga mientras se procesa una solicitud y reproducir una reacción de éxito cuando termina, todo desde un solo archivo.

Por eso Rive encaja bien en interfaces que responden: botones, personajes de onboarding, avatares de asistentes, indicadores de progreso y HUD de videojuegos. Duolingo, por ejemplo, usa máquinas de estados de Rive para sincronizar los labios de sus personajes en todos sus cursos. Si solo necesitas un clip lineal que nunca cambia, un archivo de video suele ser más sencillo.

¿Qué es un archivo .riv?

Un archivo .riv es el formato binario que exporta el editor de Rive y que leen los runtimes. Es un archivo de runtime, no un archivo de proyecto: contiene todo lo necesario para reproducir la animación, pero no se edita a mano.

Un solo .riv puede contener:

• Artboards: los lienzos que contienen el arte. Un archivo puede tener varios.
• Animaciones de línea de tiempo: clips con keyframes, como un loop en reposo (idle) o un saludo.
• Máquinas de estados: grafos que eligen qué animaciones se reproducen y cuándo.
• Inputs o view models: la interfaz que usa tu código para controlar la máquina de estados.

Como el arte se guarda en vectores y el movimiento en keyframes, muchas animaciones pueden compartir las mismas formas. Por eso un solo .riv con todo un set de estados de un personaje puede pesar menos que un video corto del mismo personaje.

Para controlar un .riv desde código necesitas los nombres de su artboard, su máquina de estados y sus inputs o su view model. La siguiente sección muestra cómo leerlos del propio archivo.

¿Cómo abro o veo un archivo .riv?

Cárgalo en un visor que use un runtime de Rive. Lo más rápido es nuestro Rive File Inspector gratis: arrastra el archivo y te muestra los artboards, las animaciones, las máquinas de estados, los inputs y los view models de Data Binding, y luego te deja reproducir cada uno y modificar los inputs en tiempo real. Funciona en tu navegador y no sube nada.

Si eres desarrollador, unas pocas líneas con el runtime web hacen lo mismo: crea una instancia de Rive con src apuntando al archivo y muestra en consola rive.contents cuando cargue, que describe los artboards y sus máquinas de estados.

Ver no es editar. La documentación de la comunidad de Rive explica que los archivos .riv de runtime eliminan datos que necesita el editor (por ejemplo, la posición de cada estado en el grafo de la máquina de estados), y que la exportación "For backup" del editor, un archivo .rev, lo conserva todo y se puede arrastrar de nuevo al editor. Si necesitas modificar un .riv que alguien hizo para ti, pide el proyecto o el .rev, no solo el .riv.

¿Cómo convierto un .riv en MP4 o GIF?

Renderízalo desde el editor de Rive. En el modo Animate, agrega un Render Preset al artboard, elige H.264, GIF, WebM, una secuencia PNG o una secuencia SVG, configura la animación, los FPS, la duración, la tasa de bits y el tamaño, luego ejecútalo desde la Render Queue y descárgalo desde la pestaña Completed del Cloud Renderer. La documentación de Rive indica que "exportar video e imágenes está disponible en los planes de pago".

Para eso necesitas tener abierto el proyecto fuente en el editor. Si solo tienes un .riv, la opción práctica es grabar el archivo mientras se reproduce en un navegador o una app. Si necesitas versiones en video de todo un set de personaje, pídele a quien hace el .riv que las renderice al mismo tiempo. Para otras conversiones, consulta cómo convertir GIF, video o PNG a Rive o Lottie.

¿Rive es gratis para uso comercial?

Los runtimes son gratis. Rive indica que todos sus runtimes oficiales son de código abierto bajo la Licencia MIT y se pueden usar en aplicaciones personales y comerciales. Incluir un .riv en tu app no requiere que tengas una cuenta de Rive ni un plan de pago.

El editor es un producto aparte con sus propios planes. A octubre de 2026, la página de precios de Rive (que muestra por defecto la facturación anual) indica:

Algunas funciones del editor son solo de pago. Exportar video y secuencias de imágenes (H.264, GIF, WebM o secuencias PNG o SVG) desde el editor requiere un plan de pago. Los precios y los límites de los planes cambian, así que revisa la página de precios antes de armar tu presupuesto.

¿Los runtimes de Rive son de código abierto?

Sí, los runtimes son de código abierto; el editor no. El código fuente de los runtimes está en GitHub, en la organización rive-app, por ejemplo rive-wasm para los paquetes web y rive-react para React. Puedes leer el código, abrir issues y fijar versiones como con cualquier otra dependencia.

La licencia MIT significa que puedes incluir los runtimes en productos comerciales de código cerrado. Tu obligación es la habitual con el código MIT: conservar el aviso de licencia junto con la biblioteca.

El editor es una aplicación comercial alojada en la nube. Puedes usarlo con el plan Free, pero su código fuente no está publicado. La licencia del editor se rige por los planes de Rive, no por la licencia MIT. En la práctica, esta separación importa poco a los desarrolladores: los diseñadores usan el editor y el equipo de ingeniería solo trabaja con el runtime de código abierto y el archivo exportado.

¿Qué plataformas pueden reproducir un archivo .riv?

Rive mantiene runtimes oficiales para las principales plataformas de apps y web:

En la web, Rive ahora recomienda @rive-app/webgl2 para la mayoría de los casos. Usa el Rive Renderer y admite funciones como el difuminado vectorial (feathering), que @rive-app/canvas, basado en Canvas2D, todavía no admite. Ambos exponen la misma API.

El mismo archivo .riv se reproduce en todos los runtimes, así que una sola exportación sirve para tu sitio web, tu app de iOS y tu app de Android. Lo que cambia es el código que escribes para cargarlo y controlar su máquina de estados, y qué APIs de control sigue admitiendo cada runtime.

Guías por plataforma: React y Next.js, SwiftUI y Android, Flutter y React Native.

¿Cuánto pesa el runtime de Rive?

El runtime agrega un costo fijo a tu app o página, independiente del peso de tus archivos .riv. Rive publica estas cifras (última actualización: enero de 2026). Como referencia, el 25 de octubre de 2026 medimos el runtime web canvas-lite 2.44.0 en unos 373 KB con brotli, que se descargan una sola vez por sitio:

El runtime se descarga una sola vez por app o sitio. Cada archivo .riv adicional suele ser ligero, así que la relación mejora a medida que agregas más animaciones. Si una página muestra un único loop decorativo, un video corto puede resultar más liviano en total; si muestra un personaje interactivo con muchos estados, Rive suele salir ganando.

En la web, carga el runtime de forma diferida (solo en las páginas que lo necesitan) para que no bloquee el primer renderizado. Además, los navegadores limitan los contextos WebGL por página; si renderizas muchas instancias de Rive con webgl2, configura useOffscreenRenderer: true para que compartan un solo contexto.

¿Necesito el editor de Rive para usar un archivo de Charmotion?

No. En todos los planes de pago, Charmotion entrega un .riv terminado, así que solo necesitas el runtime gratis para tu plataforma. El plan gratis no tiene sets de personaje. Subes la imagen de un personaje, mascota o logo, y Charmotion devuelve un set de 17 animaciones en un solo archivo .riv (un personaje plano que medimos ocupa 40 KB con las 17; un logo 3D que medimos ocupa alrededor de 1.0 MB), además de versiones en MP4, GIF y WebM/MOV transparente y código web, React y SwiftUI listo para pegar.

El archivo contiene una máquina de estados (state machine) llamada CharacterStateMachine. Un input numérico llamado mood selecciona uno de 10 loops, y triggers como success y error reproducen reacciones puntuales. Una segunda máquina de estados, LaunchStateMachine, reproduce una intro de inicio una vez y luego pasa a reposo. La guía de máquinas de estados explica las conexiones en detalle.

Los archivos de Charmotion admiten ambos sistemas de control. CharacterViewModelMachine se controla con un view model Character (Data Binding: un número mood más un trigger por cada reacción), que es lo que necesitan el nuevo runtime de Apple y React Native Nitro v0.6+. CharacterStateMachine, la predeterminada, expone los mismos estados como inputs heredados para los runtimes de web, React, Android, Flutter y el runtime heredado de Apple.

Preguntas frecuentes

¿Rive es mejor que GIF o video?

Rive es mejor cuando la animación debe reaccionar a un estado o a una entrada, porque un solo archivo contiene muchas animaciones controladas por código. El video es más sencillo para un clip fijo que nunca cambia, y no necesita runtime. GIF es la opción más débil en calidad y peso; úsalo solo donde no se puedan reproducir ni video ni Rive.

¿Puedo abrir un archivo .riv sin el editor?

Sí, cualquier runtime oficial de Rive puede cargar y reproducir un archivo .riv. Para editar el arte o la máquina de estados necesitas el editor de Rive. Para controlar la reproducción desde código, solo necesitas los nombres del artboard, de la máquina de estados y de los inputs o propiedades del view model que hay dentro del archivo.

¿Rive funciona sin conexión?

Sí, una vez que el propio runtime está disponible. Los runtimes renderizan localmente, así que un .riv incluido en una app nativa se reproduce sin ninguna conexión con Rive. En la web, el runtime carga su archivo WASM desde una CDN de forma predeterminada, así que alójalo tú mismo con setWasmUrl si la página debe funcionar sin conexión o evitar solicitudes a terceros.

¿Qué son los inputs de la máquina de estados y el Data Binding en Rive?

Son las dos formas en que el código controla un archivo de Rive. Los inputs son números, booleanos y triggers de una máquina de estados; Rive ahora los marca como obsoletos, pero los archivos existentes siguen funcionando. El Data Binding usa view models con tipos de propiedades más completos y es lo que Rive recomienda para proyectos nuevos.

Respuestas rápidas de esta guía

• ¿Qué es Rive?
• ¿Rive es gratis?

Fuentes

• Runtimes: Getting started, Rive
• Canvas vs WebGL2, Rive
• Runtime sizes, Rive
• Rive pricing, Rive
• Exporting for video and static design, Rive
• Feature support, Rive
• Data binding migration guide, Rive
• How Duolingo animates world characters, Duolingo
• Exporting (community docs: .rev backup files), Rive Community