From the very beginning of the CRL® project, I knew I wanted a wheel to explore the library’s resources, with the option to switch to a more traditional list view. Once the layouts came together, I started exploring how the wheel could transition from the homepage, how the resource titles would move as you scroll, and how the two views could connect. Then Bimo Tri got his hands on it and took the whole thing to another level. From the initial transition to the finer details of switching between views, Bimo brought so much more movement, character and feeling to the experience than I could have imagined. A great reminder of the value of getting a great creative dev on board for a project like this! Couldn’t be happier with how this page turned out!

Love that you gave Bimo credit for pushing the motion further. The wheel is fun, but I'm curious if people actually use it to browse or if most end up flipping to the list view.

Sonder One: product site for a repairable headphone

Sonder One is a headphone built to be taken apart, so this site shows it that way. As you scroll, the headphone comes apart piece by piece, from the finished pair down to its six parts, with each part labelled as it separates.

The site responds to the mouse throughout. The custom cursor holds a small sound wave that grows as you move faster. Headlines are made of soap bubbles that float up under the cursor. Guide boxes with live coordinates follow the pointer, and product photos tilt and catch the light as you pass over them.

There are three pages: Object, Anatomy and Specifications, with smooth transitions between them and a reserve form on the last page. A light and dark mode lets you view the product in chalk white or graphite.

Built with React, GSAP ScrollTrigger, Lenis, Three.js and Vite.

Good work!