Konsept ürün sitesi
Galaxy Buds4 Pro
Galaxy Buds4 Pro için 3D bir ürün sayfası. Kutu gerçek bir menteşeyle açılıyor, gürültü engelleme ve 360 Audio demolarını tarayıcıda dinleyebiliyorsun.
- Next.js
- Three.js
- React Three Fiber
- Web Audio API
- GSAP
- TypeScript
Proje hakkında
Ne yaptım, nasıl yaptım.
Bu projede en çok uğraştığım kısım ses oldu. Gürültü engelleme demosundaki şehir sesi ve müzik, 360 Audio'daki melodi; hepsini ses dosyası kullanmadan Web Audio API ile canlı olarak ürettim.
Scroll hikâyesinde kutunun kapağı açılıyor, kulaklıklar yuvalarından yükseliyor, kutu aşağı düşüyor ve kulaklıklar sana dönüyor. 3D modelin üzerindeki etiketler model hareket ettikçe onu takip ediyor.
Hayran yapımı bir konsepttir, Samsung ile bağlantılı değildir. Teknik özellikler Samsung'un resmi ürün sayfalarından alındı.
Öne çıkanlar
- 01
Gürültü engellemeyi dinle
Kapalı, Ambient ve Adaptive ANC arasında geçiş yaparken şehir sesi ve müzik canlı olarak değişiyor.
- 02
360 Audio
HRTF ile kafanın etrafına yerleştirilmiş bir melodi. Telefonda jiroskopla kafa hareketin takip ediliyor.
- 03
Pinch kontrolleri
Tek, çift, üçlü pinch, basılı tutma ve kaydırma hareketlerine bir "şimdi çalıyor" kartı tepki veriyor.
- 04
Kablosuz şarj
Kaydırdıkça kapalı kutu şarj pedine iniyor, ped yanıyor ve şarj doluyor.
- 05
Renkler ve AR
Beyaz, siyah ve pembe altın arasında geçiş yapıp kutuyu masana gerçek boyutunda yerleştirebiliyorsun.
- 06
Buds3 Pro ile karşılaştırma
Öne çıkan farklar ve satır satır açılan bir özellik tablosu.
Görseller
