To strengthen the overall atmosphere of the platform, we wanted to create an animated mascot that fully matched its visual identity.
We already had a logo featuring a character, so it felt quite natural to reuse that character and turn it into the platform’s official mascot.
The main challenge was finding a way to animate it directly inside the interface using JavaScript code. Several options quickly emerged.
Available Technologies
Combining SVG, CSS, and JavaScript
The first solution we considered was simply controlling everything with CSS and JavaScript.
This is actually what we already use on the login page, where the mascot follows the cursor and blinks.
The problem is that as soon as animations become more complex, this approach quickly reaches its limits. It would require a huge amount of code and would gradually become very difficult for a human developer to understand and maintain.
With the rise of AI, we could obviously have asked a model to generate the different animations directly in CSS and JavaScript. But even then, several issues would remain:
- Increasingly complex code with every new animation
- A component that keeps growing as more animations are added
- Difficult debugging
- Limited freedom when creating complex animations
- Poor developer experience
Ultimately, this solution creates too much friction to be practical.
It remains perfectly viable for simple animations, such as the ones you can find with “Grok Bots.” However, once you want to animate a complete character with a full body and more advanced movements, it becomes very difficult to achieve a convincing result using only CSS and JavaScript.
We therefore decided not to pursue this solution.
Rive
Our attention then turned to Rive.
If you are not familiar with Rive, I highly recommend taking a look at it. The tool makes it possible to create animated designs based on keyframes and state machines, and then integrate them into a web project.
The imported .riv file can then react to different instructions sent from JavaScript.
On paper, it was almost the ideal solution. But after doing some research, we ultimately decided not to use it for several reasons:
- Cost: to use Rive properly and take full advantage of its ecosystem, you quickly need to move to a paid plan. We wanted to avoid that dependency.
- Dependency on Rive technology:
.rivfiles remain strongly tied to the Rive ecosystem. It is not really an industry-standard format. If Rive were to disappear or completely change its business model in the future, creating or modifying our existing animations could become much more difficult.
Lottie
Lottie is ultimately the solution we chose.
Today, Lottie is one of the most widely used formats for integrating vector animations into web and mobile interfaces. It makes it possible to create relatively advanced animations while keeping files lightweight and easy to integrate.
Its main advantages are:
- Originally developed by Airbnb
- Open and widely adopted format
- Many tools available for creating, editing, or exporting Lottie animations
- Easy to use with AI
There are still a few drawbacks:
- Unlike Rive, Lottie does not natively provide a true state machine
- Each animation generally needs to be created independently
In our case, however, the advantages far outweigh the disadvantages.
For the second point, we can easily introduce an abstraction layer.
For example, we can create a MascotLottie component that receives the name of the animation to play as a prop. The component then automatically loads and runs the appropriate Lottie file.
So whenever we want to create a new animation, we simply start from the same visual base of the mascot.
And this part becomes much less restrictive thanks to Claude Code.
There are now skills that help Claude better understand Lottie technology and generate animations from a simple request, a prompt, or even an initial resource such as an image of our mascot.
In practice, a large part of the work can therefore be automated with AI.
We provide the reference mascot, describe the animation we want, and the AI can generate or adapt the necessary files.
The process currently works very well and, more importantly, allows us to quickly add new animations without turning our frontend code into an unmaintainable mess.
In the Future
At the moment, our mascot is entirely 2D.
In the long term, we would like to evolve it into a 3D mascot, in a style similar to what Duolingo has done with its character.
We have not yet decided which technology we will use for this future version.
Three.js, WebGL, formats such as glTF, or even specialized 3D animation solutions could all be considered.
But one thing seems quite likely: when we eventually reach that stage, AI will probably handle a large part of the creation and integration work.
Conclusion
After exploring several options, Lottie ultimately emerged as the best compromise for our current needs.
SVG, CSS, and JavaScript remain very effective for small interactions, but they quickly become difficult to maintain as animations grow more complex. Rive offers a much more advanced approach, particularly thanks to its state machines, but it also creates a stronger dependency on its ecosystem and introduces a cost that we did not want to take on at this stage.
Lottie allows us to maintain a relatively simple, open architecture that integrates easily with our current stack, while remaining flexible enough to create many different animations around the same mascot.
The arrival of AI tools is also significantly changing the way this type of problem can be approached. In the past, creating and integrating animations could require a considerable amount of time and manual work. Today, it is becoming possible to automate a large part of the process.
Our mascot is still only at the beginning of its journey, but this approach gives us a flexible enough foundation to gradually evolve it alongside the platform, before potentially moving to a fully 3D version one day.