Concept product site
Galaxy Buds4 Pro
A 3D product page for the Galaxy Buds4 Pro. The case opens on a real hinge, and you can listen to the noise cancelling and 360 Audio demos right in the browser.
- Next.js
- Three.js
- React Three Fiber
- Web Audio API
- GSAP
- TypeScript
About the project
What I built and how.
Sound was the part I worked on most. The city soundscape and music in the noise cancelling demo and the melody in 360 Audio are all synthesized live with the Web Audio API, without a single audio file.
In the scroll story the lid swings open, the earbuds rise out of the cradle, the case drops away and the buds turn to face you. Labels pinned to the 3D model follow it as it moves.
A fan-made concept, not affiliated with Samsung. Specs come from Samsung's official product pages.
Highlights
- 01
Hear the ANC
Switch between Off, Ambient and Adaptive ANC while a city soundscape and music change live.
- 02
360 Audio
A melody positioned around your head with HRTF. On a phone, the gyroscope tracks your head.
- 03
Pinch controls
Pinch, double pinch, triple pinch, hold or swipe, and a "now playing" card reacts.
- 04
Wireless charging
As you scroll, the closed case lands on a charging pad, the pad lights up and the charge fills.
- 05
Colors and AR
Switch between White, Black and Pink Gold, then place the case on your desk at real size.
- 06
Buds3 Pro comparison
Headline gains and a spec table that reveals row by row.
Gallery
