Responses by Quintin Lodge, designer and founder, Non-Linear Studio; Rhox, illustrator and animator; and Mario Sanchez Maselli, developer, Non-Linear Studio.

Background: “The purpose of the site is twofold,” explains Quintin Lodge, “first, to communicate the achievements and value of tech engineering company Integrated Reasoning’s product Honu to potential customers; and second, for recruiting as Integrated Reasoning scales. The main audience would be executives on the technology side, such as chief technology officers, and tech leads—both of whom would already be familiar with the problems Integrated Reasoning is solving as well as possess a general understanding of the technology.”

Design core: “The site’s core features and design elements are the line art, clean and modern typography, and the unique brand they create when paired together,” says Lodge. “The 3-D elements also help to infuse some unexpected depth and life into an otherwise retrofuturistic 2-D experience.”

“For the design style, the overall idea was to create something elegant and retrofuturistic,” says Rhox. “We pinpointed the recent revival of brutalist design as a core inspiration, as well as the amazing visual worlds crafted by companies such as Teenage Engineering. The resulting site takes a minimalistic approach, with line art elements and a bold, classic, Space Age-like use of typography.”

Favorite details: “The 3-D elements, the line art and animations, and how we were able to achieve these with a very performant site,” says Lodge.

“The whole IRX-Honu section of the website features the design elements I most enjoyed crafting,” says Rhox. “You’ll find several subtle elements that pay homage to classic sci-fi UIs—actually, I still can’t believe I could squeeze my love for 2001: A Space Odyssey and Star Wars into such a high end product!”

Challenges: “The process of creating a visual language and subsequently creating visual assets that support some very advanced and technical mathematical content,” says Lodge.

Time constraints: “To meet the time constraints of the project, we ended up leveraging Lottie animations for much of the line art,” Lodge states. “We also launched in a phased approach where we initially had some WebGL elements as video. These have since been updated to WebGL using three.js.”

Alternate paths: “We experimented quite a bit before establishing the line and optical art as the distinctive design feature,” Rhox explains. “Had we discovered earlier how much we all loved that specific style, we could have invested even more time into developing hypnotic animations and interactions!”

New lessons: “Oh, we learned loads,” says Lodge. “For starters, we learned about the NP-complete problems of computer science and how Integrated Reasoning is essentially taking on quantum computing—without quantum computers—to solve these problems by orders of magnitude faster than conventional means. We also learned about the Ising model and even incorporated it into the background transitions.”

Navigation structure: “The navigation structure is pretty simple and straightforward, seeing as Integrated Reasoning is a young company and only has a few pages of content,” says Lodge. “As they grow, we will need to take a look at how to expand the navigation system to accommodate more content.”

Technology: “The Integrated Reasoning site was built on the Sanity CMS with 11ty and deployed on Netlify,” says Mario Sanchez Maselli. “This setup allows us to produce a static and super fast site while retaining the CMS functionality. The front end is powered by 11ty, GSAP, Taxi.js and three.js, and the back end is powered with Sanity v3, which lets us have full control over the type of content that the client needs. We made use of different modules to structure and give flexibility to each section on a page.

“GSAP is a must have on pretty much all of our projects, and there is no exception on this one,” Sanchez Maselli continues. “We love GSAP’s split-text functionality and use it quite frequently to create nice type animations. On this project, however, we approached splitting the text a bit differently: we decided to split the text component by component based on the visibility of that element. The reason for this change was that when splitting the text all at once, we were noticing a hit on performance. This one small change was huge in terms of creating a more performant and smooth scrolling experience.

“Finally, we also used three.js on a couple of modules that were loading different 3-D models,” Sanchez Maselli adds. “three.js let us do this very easily and seamlessly. Probably the most interesting feature using three.js is the hero module on the Homepage. Here, we made use of a buffer geometry to create particles on a grid. Then, we applied a 3-D Perlin noise on the vertex shader to the particles to achieve some movement. To wrap it all up, we added a mouse position listener to make the module more engaging.”

Special technical features: “So, if you are wondering how a static site can make use of a headless CMS, this is where Netlify helped us,” says Sanchez Maselli. “Sanity gives you the opportunity to create a hook every time an action is triggered on the back end—save, delete, update, and so on. Every time this hook is called, we can make a new build and a new deployment on Netlify.”