The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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!
Excellent work!!
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Why does a dashboard full of numbers still feel calm?
Bento grids are everywhere, and done right it's not a trend, it's information design. Each cell = one number, one meaning. The grid does the hierarchy for you.
Our three rules for a bento that works:
One idea per cell. Progress, glucose, one task. If a card needs two sentences, it needs two cards.
Mix the scale. One hero cell, a few mediums, one tiny stat, same gap everywhere.
One warm cell. A single card runs warm against the cool, dark screen; it carries the eye, and the rest stay quiet. No neon needed. Grids are calm. Content is loud. That's the whole trick.
Love the three rules. How do you handle this grid when it collapses to mobile without losing the hierarchy?
So, what is ROSI?
A few cans.
Five colours.
One very simple fish.
A ridiculously large wordmark.
And hopefully proof that everyday products don’t have to look everyday.
The ridiculously large wordmark is the entire personality, tinned fish has never strutted like this. Proof that confidence is a design decision, not a budget line.
I tried experimenting a little with my previous design. I changed the fonts and background a bit. Which version do you like better?
22 voted
73%
8 voted
27%
30 votes
Closed
New design for sure. The distressed texture in the type makes it feel like actual street photography lives inside the letters. The previous version is clean but this one has grit.