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.
I wanted to tell a short story through animation, atmosphere and cinematic storytelling. The Last Light follows Kaito, a young swordsman returning to the ruins of his village, where a mysterious girl named Ayame reveals that his family’s past is far darker than he imagined.
The project moves through flashbacks, character interactions, supernatural battles and a final confrontation with Lord Akuma... building the story toward a cliffhanger rather than simply ending with the fight.
This was an exploration of 2D animation, character-driven storytelling, cinematic composition and anime-inspired visual direction.