Konsept ürün sitesi
Galaxy S26 Ultra
Galaxy S26 Ultra için scroll ile ilerleyen, gerçek zamanlı 3D bir ürün sayfası. Telefon dönüyor, S Pen yuvasından çıkıyor ve tüm renklerine ayrılıyor.
- Next.js
- React Three Fiber
- Three.js
- GSAP
- TypeScript
- WebXR
Proje hakkında
Ne yaptım, nasıl yaptım.
Samsung'un ürün sayfalarını sevdiğim için kendi versiyonumu yaptım. Sayfa boyunca tek bir 3D telefon modeli ilerliyor: kaydırdıkça hareket ediyor, dönüyor ve parçalarına ayrılıyor. Her bölümün kendi 3D veya animasyonlu demosu var.
Performansa çok dikkat ettim. Modeller Draco ile sıkıştırıldı, sahne sadece bir şey hareket ederken çiziliyor ve hero'dan sonraki tüm 3D bölümler tek bir WebGL canvas'ı paylaşıyor. Lighthouse'ta erişilebilirlik ve SEO 100 aldı.
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
S25 Ultra ile karşılaştırma
İki telefon gerçek boyut oranlarıyla yan yana 3D olarak duruyor, yanında özellik tablosu var.
- 02
Kendi Ultra'nı oluştur
Renk ve hafıza seçince fiyat anında güncelleniyor. Seçtiğin rengi AR ile odanda gerçek boyutunda görebiliyorsun.
- 03
Galaxy AI demoları
Live Translate, Circle to Search ve Photo Assist kısa animasyonlu hikâyeler olarak oynuyor.
- 04
Kamera
Kaydırarak 0.6x'ten 100x Space Zoom'a yaklaşma ve sürüklenebilir önce/sonra kaydırıcısıyla gece çekimi karşılaştırması.
- 05
Sürükle ve döndür
Telefonu tutup döndürebiliyorsun; ataletle dönüp yumuşakça yerine oturuyor.
- 06
Filmi izle
Tek tuşla tüm sayfa otomatik kayan bir tura dönüşüyor; durdurup devam ettirebiliyorsun.
Görseller
