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.
For this project, we designed a complete product experience that combines strong visual storytelling with clear product information and intuitive navigation.
The visual direction uses warm imagery, clean typography and generous spacing to create a modern website that feels connected to the product's natural and sustainable qualities.
The experience is structured around the questions a potential customer naturally has:
What is the product?
How does it work?
Why is it useful?
What makes it worth choosing?
That keeps the website focused on both brand presentation and product discovery.
Services: Product Website Design · UI/UX Design · Sustainable Web Design · Responsive Web Design · Web Development
Designed by WaxyWeb.
Have a product that needs a stronger digital experience?
The business of being creative deserves a considered workspace.
I built Dayrate for the work around the work: the brand conversation, the campaign deadline, the recorded payment, and the next introduction.
It brings those pieces into one connected creator studio.
Partnerships: move between a campaign grid and pipeline, with the brief, fee, status, and deliverables attached to the same record.
Delivery: see upcoming commitments on a calendar and export them as an ICS file.
Earnings: distinguish recorded fees from received amounts without pretending the interface is a payment processor.
Media kit: edit a creator profile and collaboration packages, then print a clean, shareable PDF through the browser.
The visual direction pairs warm paper tones, expressive typography, original synthetic campaign artwork, and restrained motion. I wanted the workspace to feel like a creative studio while keeping the operational details easy to scan.
A detail I cared about: the views share one underlying set of records. Updating a partnership should carry through to its calendar and earnings context, not create another isolated dashboard.
Built with React, TypeScript, and Vite. The release includes validated JSON backup and restore, CSV exports, reduced-motion support, keyboard-accessible interactions, and responsive layouts checked across six viewport sizes.
The public demo uses fictional creator data. Workspace changes stay in your current browser and device. This version does not include accounts, cloud sync, shared collaboration, or payment processing.
The narrated walkthrough below shows the complete workflow, with audio and no subtitles.