Airsoft
E-Ticaret Mağazası
Site İçi Görüntüler
Proje & Bağlam
Taktik ve askeri airsoft ekipmanlarına odaklanan bir e-ticaret platformu. Tüfekler, ekipman, aksesuar ve kıyafet kategorilerinde 200'ün üzerinde ürünü sergileyen bu platform, dark tactical estetikle donatılmış sürükleyici bir alışveriş deneyimi sunuyor.
Hero bölümünde Three.js ile interaktif 3D sahne, GSAP animasyonları ile sayfa boyunca akıcı içerik açılımları. Her kaydırmada yeni bir katman açılıyor.
Bileşen Mimarisi
Platform; HeroSection, CategorySection, FeaturedProducts, UpcomingProducts, StatsSection, TestimonialsSection ve TrustBar bileşenlerinden oluşuyor. Her bileşen kendi animasyon mantığını kapsüllüyor.
UpcomingProducts bölümü, yakında gelecek ürünleri geri sayım ile sergiliyor. Müşteri beklentisini yönetiyor ve geri dönüş oranını artıran bir heyecan döngüsü yaratıyor.
Tasarım Sistemi
Dark tactical estetik, askeri ekipman dünyasının ciddiyetini dijital alışveriş ile harmanlıyor. Koyu zemin, yeşil aksan, turuncu vurgu — her renk bilinçli seçildi.
Platform Özellikleri
Three.js Hero Sahnesi
WebGL tabanlı Three.js ile interaktif 3D sahne — dönen geometriler ve parçacık efektleri ile taktik atmosferin ilk izlenimi.
Ürün Kategorileri
Dört ana kategori, filtreli grid görünümü. Her kart GSAP staggered giriş animasyonu ve hover efektiyle zenginleştirildi.
Upcoming Products
Yakında gelecek ürünler için geri sayım sayaçlı özel bölüm. Müşteri beklentisi yönetimi ve geri dönüş motivasyonu için tasarlandı.
Trust Bar
Güvenli ödeme, hızlı kargo, iade garantisi — rozetler sayfa boyunca tekrar ediyor ve soldan sağa kayan animasyonla sahneye çıkıyor.
Neden Bu Stack?
Next.js 15 SSG + dinamik route'lar için; TypeScript ürün & sepet modelleri için; Tailwind hız için. Üçü birlikte production-ready e-ticaret temeli oluşturuyor.
Three.js canvas tabanlı çalışıyor, DOM'a dokunmuyor. GSAP RAF tabanlı tweens — CSS animasyonlarından çok daha pürüzsüz geçişler.
Neden Three.js + GSAP?
Airsoft ekipmanı fiyatı ve kalitesiyle ciddiye alınan bir satın alma kararı gerektiriyor. Hero'da dönen bir 3D sahne, 'bu işi ciddiye alanlar' hissini ilk 3 saniyede kuruyor. GSAP, scroll tetikli animasyonlarla ürün kategori geçişlerini filmsel kılıyor — kullanıcı gezinirken değil, deneyimlerken hissediyor.
Teknik Zorluklar
Three.js Server-Side Rendering Çakışması
⚡ Sorun
Three.js window ve document objesine doğrudan erişiyor. Next.js App Router sayfalara server-side render uyguluyor — build sırasında 'window is not defined' hatası verdi.
✓ Çözüm
Three.js sahne bileşeni dynamic() ile import edildi ve ssr: false yapılandırması eklendi. Bileşen sadece client-side render ediliyor — gradient placeholder Suspense fallback olarak kullanıldı.
GSAP ScrollTrigger ve React Hydration
⚡ Sorun
GSAP ScrollTrigger, DOM elementlerine ref ile bağlanıyor. React re-render sırasında elementlerin pozisyonu değişince trigger'lar yanlış pozisyonları tutuyordu.
✓ Çözüm
GSAP context ile tüm animasyonlar scope'a alındı. useEffect cleanup'ında ctx.revert() — her re-render'da ScrollTrigger instance'ları temizlenip yeniden oluşturuluyor.
200+ Ürün Görseli Yük Performansı
⚡ Sorun
200+ ürün görseli ilk yüklemede istenirse 40MB+ data — mobile bağlantılarda sayfa kullanılamaz hale geliyordu.
✓ Çözüm
Next.js Image ile WebP + srcset otomatik. Viewport dışı ürünler lazy-load. Thumbnail 400×400 ile sınırlı, tam görsel yalnızca ürün sayfasında yükleniyor.