Sebastian reached out to me with a clear goal: he needed a high-quality, lightweight animated background for nexio.xyz. At the time, the website featured an After Effects animation exported as a Lottie file—but the result was far from ideal. The animation wasn’t smooth, and the large file size negatively impacted page load speed.

Before jumping into animation, Sebastian also asked me to redesign the existing visuals. He felt that his original design lacked precision and clarity. Using a strict grid system, I redesigned the visuals to ensure every detail was clean and aligned—setting a strong foundation for the animation phase.

This project came with several interesting technical and design challenges. One of the most notable was that the animation had to be created in an isometric perspective, which required careful attention to geometry, depth, and consistency between objects. Animating in an isometric style can be tricky, especially when motion needs to feel natural without breaking the illusion of perspective.

The background layout consisted of 5 interconnected “stations”. Initially, we considered placing all stations within a single Rive artboard. However, this caused performance issues and laggy transitions.

To solve this, I split the layout into 4 separate artboards, the trick was to make transitions between stations seamless, so the user wouldn’t notice they were switching between different animations.

To optimize performance even further, I built a system where only two artboards are active within one viewport at any given time (e.g., if the user is at Station 1, only animations for Station 1 and 2 are running). This reduced memory usage while keeping the experience fluid.

In addition to the desktop version, Sebastian also requested a separate animation layout optimized specifically for mobile. This required additional considerations to ensure the visual structure and transitions remained smooth on smaller screens—without losing the isometric feel and style.

This project was a great mix of creative design and technical problem-solving — from redesigning visuals in isometric style to building smooth, efficient animations in Rive. Huge thanks to Sebastian for the opportunity and trust! If you're working on something similar and need an animation partner, feel free to reach out. I'd be excited to help.