Animating 3D particles for landing page experience

Put together a landing page animation using three.js to represent the abstract nature of AI

  • #three.js
  • #web
  • #landing pages

Searching for metaphors for an AI company

The aim for Maluuba's new website design was to convey the company's strengths in Artificial Intelligence and present a brand that expressed creative problem solving within the fields of NLP and Machine Learning.

The website design at the time had no distinctiveness and resembled a stock design template that many technology companies share.

Maluuba's previous website design
Maluuba's previous website design

The new Maluuba website experience needed to be inventive and unique. So we decided on a minimal 1-page webpage that would be split up into 4 sections. Each section would have no more than a few paragraphs of text accompanied by illustrative animations that would contextualize each piece of information.

Since the visitors to our website would primarily be potential hires and possible investors, we wanted to introduce the Maluuba brand as concisely as possible. After much discussion we decided on the tag line "Natural Language AI powering millions of smart devices" that would clearly explain our core strength while showcasing the reach our technology has made within the market.

Something bold and distinctive

We also wanted to do something bold and unique that, like our company, would express a culture of creativity and futuristic thinking. Rather than use photos to do so, I thought that using an HTML5 driven animation could help stand out. I did some research, discoverd three.js, played around with one of their demo examples and after some considerable hacking was able to craft together a smooth 3D wave animation.

The idea being a reference to audio waves (we are a natural language company!) but also express the idea of progress and invention over time.

Full Video Demo

A screen capture of the new Maluuba website redesign

It was a fun project and I found three.js really interesting. It's something I definitely want to learn properly.