Javier: Lead, Interaction and UI Designer, Video Editor Yerandy: Rive Ingenier Daniel: Framer Designer

Rive: Final UI Design, Components, Interactions, State Machines, Solos, Data Binding, Scripting. Figma: Initial UI Explorations. MidJourney: Malio Bellini asset video recreation. Ae, Pr, Artlist, Sunno: Video Edition for the final Presentation and Social Content.

Wanted to extend the previous tribute to the Olivetti Divisumma 18, the legendary printing calculator introduced in 1973, and go a bit further by paying tribute to its designer, Mario Bellini.

Got a couple of helping hands from my team to make it to the Rive Contest on time.

What Was Done:

-Hero UI for the Mario Bellini intro, transitions, slider...

-Divisumma 18 Details UI.

-Functional Divisumma calculator implemented, data binding to handle all the calculations (updated with Scripting in the latest version)

-Framer Runtime. We are using all transitions and the functional Divisumma and have started integrating it with Framer.

-Presentation and Content for Socials.

Exploration and Content Research. Testing and playing with the Layouts and possible components for the concept.

Recreating a Mario rotation video asset to serve as a key part of the interaction and a big visual protagonist on the Hero UI.

The Core!

Complete UI assembled on Rive. The complete functional calculator was integrated into the Hero embed component, with 2 main projects in a single Rive file: the Web (Hero and Product Details UI) and the Calculator.

Interesting interactions plus microinteractions were implemented across all the UIs, and the morphing transitions from the slider to the detail page were done manually, surgically positioning each component during the motion to achieve a smooth, desired result.

Jerry Liu Creative Director at Rive

A challenge in the Databinding calculus has arisen in the first version (Pre-Scripting) for achieving all the initial operations of the Divisuma Calculator. Later, after the script goes out, we update everything to include Scripting.

One of the hardest decisions came from a simple change in the size of the main Bellini portrait. That one adjustment completely changed the layout perspective. The first version feels more brutalist, with a stronger cinematic vibe and a riskier composition. The second version keeps more breathing room and scans easier, more conventional, cleaner, and closer to what we usually see.

We ran a taste test on Contra to get the creative's opinion on this topic. Sadly, it was just after the entry was made. We would have preferred to do it earlier. The feedback and the participation were crazy awesome.

Using the Framer runtime, the Rive app was getting tested and passed as a component ready to interact with as part of a possible final digital product. For that, after some tests, we split the Rive project into sections and components to have them in Framer as dynamically and scalable as possible, using databinding to trigger states and transitions as we demonstrate in the Rive presentation.

A possible interview is coming soon, including additional information on this part. (The post will be updated on this part when it is ready)

This project got an epic 3rd place that tastes like gold, so glad we entered the top 3 with such awesome entries we witnessed during that high-quality contest. Complete winners announcement here