RIVE : des animations interactives dessinées et codées au même endroit
⏱️ Temps de lecture estimé : 4 minutes
📌 RIVE est un moteur d’expériences interactives : un éditeur où l’on dessine, anime et code dans un seul document, des runtimes open source qui exécutent le résultat nativement sur mobile, web, bureau et consoles, et un CLI pour laisser un agent générer les scènes. Ce que vous dessinez est exactement ce qui part en production.
Le décor habituel, c’est une chaîne d’outils qui ne se parlent pas. On dessine dans Figma, on anime dans After Effects, on exporte en Lottie, on bricole le comportement en CSS et en JavaScript, puis on se passe le relais d’un designer à un développeur. Chaque étape perd quelque chose en route. Rive prend le chemin inverse : le même document contient le dessin, l’animation et la logique d’interaction, et c’est ce document qui tourne dans l’application.
Vous ouvrez l’éditeur dans le navigateur, sur editor.rive.app, ou en application de bureau sur macOS et Windows. Vous dessinez des formes vectorielles, vous construisez des layouts responsives, vous ajoutez des os, des maillages, des joysticks et des contraintes pour le rigging, puis vous animez sur une timeline. Rien d’exotique jusque-là. La différence arrive avec les State Machines : plutôt que d’enchaîner des images, vous décrivez des états et des transitions, et l’animation répond à l’utilisateur — survol, clic, changement de taille d’écran.
Le reste de l’éditeur pousse la même idée. Le Data Binding relie les propriétés du dessin — texte, couleurs, positions — à des données temps réel via des View Models. Les Events font remonter des signaux au code, par exemple pour ouvrir une URL ou déclencher un son. Le scripting, en Luau, couvre les comportements que les outils intégrés ne prévoient pas. On peut tout faire sans écrire une ligne, ou descendre au niveau du code quand le besoin l’exige.
Côté exécution, Rive fournit des runtimes open source sous licence MIT pour le web en WebAssembly, React et React Native, Apple, Android, Flutter, Unity, Unreal et C++ — distribués via npm, Swift Package Manager, Maven ou pub.dev. Ils lisent un fichier .riv et le jouent nativement. Le socle graphique est le Rive Renderer, un moteur vectoriel accéléré par le GPU qui vise les 120 images par seconde. Pour situer le poids, le runtime web canvas-lite tient autour de 222 Ko compressé.
La nouveauté qui change la donne cette année, c’est le CLI. rive create monte un projet, rive ouvre une fenêtre de prévisualisation qui se reconstruit à chaque sauvegarde. Les scènes s’écrivent en Rive Markup Language, un format texte qui se versionne et se relit comme du code. On y branche un agent : il lit les instructions du projet, écrit la scène, la compile et la vérifie sans fenêtre. Vos fichiers deviennent alors une affaire de dépôt Git autant que de dessin.
Quelques repères avant d’essayer :
- 🎨 Dessin, animation et logique réunis dans un seul document
- 🕹️ State Machines et Data Binding pour l’interaction sans code
- 📦 Runtimes open source (MIT) : web, iOS, Android, Flutter, Unity, Unreal…
- ⚡ Rive Renderer, moteur vectoriel GPU visant 120 fps
- ⌨️ CLI et RML pour générer, tester et versionner des scènes avec un agent
- 💳 Éditeur gratuit, mais l’export runtime passe par l’offre payante
Il faut rester honnête sur les limites. L’éditeur est gratuit pour apprendre, mais l’offre Free plafonne à trois fichiers collaboratifs et n’inclut pas l’export pour runtime : il faut passer à Cadet, à 17 $ par place et par mois, pour livrer en production. Et si les runtimes sont bien open source, l’éditeur et le format .riv restent propriétaires et attachés à un compte.
Je trouve le pari cohérent. Les outils d’animation classiques obligent à traduire le design en code à un moment ou à un autre ; Rive supprime cette traduction en gardant un seul artefact du premier trait jusqu’à l’écran. Pour une équipe qui fait vivre des interfaces animées sur plusieurs plateformes, c’est le genre de simplification qui se paie en réunions en moins.
Sources
