Nacero Motion System
Nacero, Nacero aims to lower the barrier to the carbon revolution by offering a cleaner gasoline and hydrogen solutions that work with existing vehicles. To tell this story a gorgeous design had been developed. I was asked to devise a motion system as elegant as the layouts.
Motion Design, Design System, Developer Handoff
Edenspiekermann LA
January 2021
Nacero
Concept
The Nacero products are at their hearts liquid and gas fuels. However the Nacero vision is a transition to a carbon free economy whilst maintaining personal freedom. These core elements of the brand led to the vision leaning 'Life Unbound' concept. To interpret this into motion, I wanted reflect both of these tensions. At a micro level movements embody the fluid dynamics of the fuels. At a macro level movements pursue the idea that the containment is an illusion; using crops to extend beyond the viewport and parallax to build depth.
System
For the system to be implementable it needed to be as consistent as possible. To these ends I created standard properties, these included: Default curves, delays, and parallax levels. As the system developed these elements formed the building blocks for all the animations in the system.
Primary easing curve
This curve is the primary interactive curve and gives direct feedback. It is the starting point for 90% of the animations in the system.
opacity easing curve
This curve is the primary interactive curve and gives direct feedback. It is the starting point for 90% of the animations in the system.
Parallax levels
There are five levels of the parallax effect, each represents a different depth. Levels 2 through 5 are closer together and produce only a subtle effect. Level 1 is pronounced and represents are a far away object.
parallax timeline
Atoms
For the hero typography I wanted to reveal with the same lightness of touch as the serif hero font. For the body copy I wanted it to embody fluidity both laterally and vertically.
Heading — speed 1
Heading — speed 2
Body
BODY COPY SIDEWAYS
Atoms
Combine elegance with responsiveness; with slower background effects paired with snappy direct user feedback. The fluid boundaries idea is retained with highlights moving in from the left of the frame.
Article cards
CTAs
Related links
Stat draw
loading sequences
Molecules
These more sophisticated components were real beneficiaries from the building blocks established by the rest of the system, Utilising the typography and micro interaction defaults already established. Here the motion aims to guide the UX contextually highlighting and revealing elements to aid the user.
Navigation
Map interactive
implementation
Too often beautiful work motion work is done only for it to die implementation. For Nacero all motion was meticulously specced, with animations building upon one another. This resulted in implementation that was 1:1 with the original design. A huge shout out to Devs at Stanga 1 for your attention to detail in making this happen!
