Developing a motion system for an iconic Ring

Derived from the Meta logo as seen from above, the new Meta AI Ring has fast become an iconic symbol and a talking point in mainstream media.

As with every good logo, this design could only be elevated with motion, so we were invited to jump on board this game-changing project to see where we could take the Ring in the realms of animation.

Meta AI is a new artificial intelligence system, developed by Meta to live in a newly launched Meta AI App and the wider Meta family – including Facebook, WhatsApp, Instagram and Messenger – and incorporating a new voice component.

We began by workshopping with Meta on the strategy for its journey into motion, to figure out the tone and messaging we wanted the icon to convey through the way it moves, and how it would adapt to sit in different locations, from marketing to augmented reality spaces.

We created a complete library of versions of the Ring for use in all planned contexts, including live reactive animations for voice-activated AI – it moves outwards when it’s responding, inwards when it's listening – and sound waves that visually scale according to the pitch and volume of your voice.

Each asset was created in Vector layers by our team, and transcribed into code for Lottie so every version of the animated Ring is ready for use across Meta’s apps, shaping the way billions of people connect and interact online.

Services

Tone Strategy, Design, Animation, Technical Testing, System guidelines, FigJam design sprints, 3D Design & Animation, Render & Delivery

Deliverables

Library of 25 x unique Lottie-ready animations, 16 x voice state animations, 4 x marketing end cards