Explore More Projects
Continue browsing our work or view the full list of projects across digital systems, platforms, and web solutions.
Mario Bellini UI - Award winner
An interactive Hero UI and functional Divisumma 18 calculator tribute to Mario Bellini, designed for the Rive X Contra Contest. The project features detailed UI interactions, microinteractions, and smooth morphing transitions, combining Rive animations with Framer runtime integration for a dynamic digital experience. This project achieved an epic 3rd place in the contest, earning recognition among top-quality entries and highlighting the team’s creative and technical execution.
Requirements, Challenges & Process
Requirements
The goal was to extend a tribute to the Olivetti Divisumma 18 calculator (1973) and go further by honoring its designer, Mario Bellini. The project required creating a functional Divisumma calculator integrated into a Hero UI, with smooth transitions, interactive components, and microinteractions. The design needed to be modular and scalable for Framer runtime, supporting social content presentation as well.
Challenges
One of the hardest decisions involved adjusting the size of the main Bellini portrait, which drastically changed the layout’s perspective. The first version had a stronger, more cinematic and brutalist feel, while the second version allowed more breathing room, making it cleaner and easier to read. Another challenge was implementing databinding and scripting for the functional Divisumma calculator, ensuring all operations worked accurately in the Rive file while maintaining interactive transitions.
Process
We provided a team consisting of:
3 Designers
The process started with UI explorations in Figma, followed by assembling the complete UI in Rive, including Hero, Product Details, and Calculator projects in a single file. Components were split for Framer integration, with databinding and state triggers implemented. Animations, microinteractions, and morphing transitions were carefully positioned to achieve smooth results. Video assets were created and edited for social content and final presentation, combining AE, Premiere, and additional creative tools. The final product was submitted to the Rive X Contra Contest, achieving a top 3 placement.
The Concept
The concept focused on choreographing interactions across all UI components, integrating a fully functional calculator into an interactive Hero experience. By combining Rive animations with Framer runtime, the project allowed dynamic states, smooth transitions, and microinteractions. This created a visually striking and interactive tribute to Mario Bellini and his iconic Divisumma 18, balancing creativity with functional design while also producing content for social media and presentations.
