Loading ...

Responses by CUSP.

Background: Furniture design company Monolith had been using Notion to display its products and wanted to jump into creating a new site to better display the product in a visual manner. The task was how to create a digital experience that reflected the beauty and detail of each Monolith product and not just be a container but a natural extension of it. So, we worked to design and develop an experience that takes cues from classic design languages but also feels uniquely ownable to Monolith. The audience for this is interior designers and gallery owners, so form and function had to merge seamlessly here. We worked to create something that was fast and seamless but, at the same time, felt expressive and creative to better resonate with the audience.

Design core: The site’s core design style is based on Swiss style with some slight brutalist influences. We wanted to create something that felt like a reflection of Monolith’s physical pieces, something that was minimal in its approach but also bold and geometric in other aspects. That’s where the two styles merged together so beautifully that the design is both elegant and almost utilitarian at the same time. Nothing is there without purpose.

The core features are the ability to preview the product and dive into more product detail effortlessly. The core function of the site is to display the product, so we created a UI system that encouraged exploration; however, we also implemented the modular design system to let visitors view the product how they like with shifting aspect ratios on the product grid and the detail view in the product inner.

Favorite details: The dynamic view changer on the product grid. We wanted to enable the user to view and interact with the product in their own personal preference. The task then was how to have it be seamless and fluid and not with extra layers of loading or page transitions. We found a middle ground that was both achievable from a technical perspective but also conceptually. This way, we created something that was responsive in real time to the users’ interactions and allowed them to dynamically change how they view the product and enable them to navigate alternative views seamlessly.

Technology: For the Monolith site, the setup wasn’t overly complex. It might surprise some to know we did not build this on Shopify, as no direct purchases are made from the website. We used Next.js as the framework, Sanity as the headless CMS and Vercel for the hosting. Both Sanity and Next.js use Typescript.

On the front end, all animations are executed with GSAP and Framer Motion. Framer Motion is specifically being used to override the native Next.js default page-to-page transitions; instead, it gives them a precise delay on leaving and entering, allowing the transitional “wipe” to slide up and away to reveal the next page. We used GSAP for every other animation on the website. For items that animate upon entry, we used GSAP’s ScrollTrigger.

Special technical features: A specific animation some may be curious about is the box-transition animation on the products page. For this, we used GSAP’s extremely helpful Flip plugin. The Flip plugin allows us to map and animate divs to other divs on the page with ease. Essentially, all three views of the sliding toggle—small, medium and large—have the first ten or so boxes rendered and are hidden depending if the view is active or not. There is another view we call “transition boxes,” which hold and move to the active view’s location upon moving the slider and changing the current active view.

monolith.nyc

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In