Liquid Crystal - Web development for L+R's luxury agency

Liquid Crystal is the luxury arm of Levin Riegner, a strategy and design studio in NYC. They brought me on board to build out the framework and functionality behind the website.

Under the hood I built a complex structure so that any button you press or answer you give, changes the section hierarchy and content as well as the chat dialogues within the conversational chat forms.

Role:

Front-end Developer / Engineer

Tags:

AgencyFront-endReactGatsbyDatoCMSConversational Form (Space10)WebGLRelative Light/Dark Mode

Year:

2021

Agency:

Levin Riegner

Liquid Crystal - Web Development (React, Gatsby)

Website Landing page hero

Website Hidden CTAs

Hero Interactive WebGL

As you scroll down you are presented with subtle questions, which when answered changes everything under the hood.

With the first question, it repopulates the hierarchy of sections below so it’s more targeted. Find another site like that!

But also, whenever you decide to click a CTA to open up a conversation, you’ll interface with a whole different chat dialogue as it’s dependant on your choices.

Cool, huh?

Website Infinite marquees

Liquid Crystal – Interactive team list section with hover effects

Website Interactive team list

I created the entire front-end using Gatsby (a growing and popular framework before Netlify bought it).

The conversational form functionality was initially built by SPACE10 (when they existed).

I took it beyond it’s capabilities and created something that was directly integrated into other components on the site using the power of React’s state.

Liquid Crystal website with conversational chat

Website Conversational form UI

Mobile Responsive UI

One final touch as part of the development of this project, was light/dark mode.

Now this is generally quite easy to implement, just switch out the ThemeProvider on a toggle. However, I actually made this automatically switchable depending on time of day as well, so it would relatively show the light version in the day, dark version at night, no matter where you are in the world.

AdamRoberts

Design &Engineering

Leave your details