Her şey bir X postuyla başladı. @wojakdeveloper, freelance piyasasında 500 TL’ye istenen bir işi paylaşıyor: Mobil bir arayüzde bildirim kartlarının 3D spiral şekilde dizilmesi, sinüs tabanlı akıcı hareketler falan. Ben de altına yazdım: “Bir halt değil, 10-15 dakikalık kod.” Adam hemen challenge etti: “500 TL vereyim yap?”
Ben de Jerry Maguire filmindeki gibi içimden haykırdım: “Show me the money!” (Jerry Maguire, 1996 – Tom Cruise’un efsane repliği). Kabul ettim tabii. Repoyu açtım, kodladım, linki attım: “Alayım 500₺.” 😏 Henüz para gelmedi ama challenge tamamlandı. Muhabbetin tamamı burada: X Thread
Proje Ne Ki?
Adı Swrill Cards (spiral + swirl karışımı, espirili olsun diye). Three.js ile yapılmış, tamamen vanilla JS – hiçbir framework, build aracı yok. CDN’den Three.js çek, kodla, bitir.
Kartlar (bildirim gibi düşünün) dikey bir spiral üzerinde dizili. Altta küçük ve sıkışık başlıyor, yukarı çıktıkça büyüyor, genişliyor ve renk gradyanıyla canlanıyor. Derinlik hissi veriyor, hafif wobble animasyonuyla da “Ben buradayım!” diyor.
Etkileşimler:
- Fareyle veya parmakla sürükle: Yukarı-aşağı kaydır.
- Pinch zoom ya da mouse wheel: Spiralin genişliğini değiştir – daraltınca kartlar dipte stack oluyor, açınca geniş spiral haline geliyor.
- Mobil dostu: Gerçek telefonda açın veya preview.html’de telefon çerçevesinde deneyin.
Canlı demo: https://halityesil.github.io/swrill-cards/
Kaynak kod: GitHub Repo
Teknik Kısım (Ciddi Olalım Biraz)
Spiral mantığı basit matematikle çözülüyor. Her kartın pozisyonu:
const y = index * spacing - scrollOffset;
const angle = y * frequency;
const x = Math.sin(angle) * amplitude;
const z = Math.cos(angle) * amplitude * 0.5; // Hafif elips olsun
mesh.position.set(x, y, z);Kartlar eğriye teğet olacak şekilde dönüyor (atan2 ile hesaplanıyor), yoksa yamuk duruyor. Ölçek de derinliğe göre değişiyor – alttakiler küçük, üsttekiler büyük.
Veriler dummy JSON’dan geliyor (50 tane bildirim), ama gerçek API’ye bağlamak çocuk oyuncağı.
Three.js versiyonu 0.161.0, saf ES module ile import ediliyor. Performans iyi, mobil dahil sorunsuz çalışıyor.
Neden Yaptım, Ne İşe Yarar?
Bruce Lee’nin dediği gibi: “Be water, my friend.” (Bruce Lee, 1971 röportajı – Akışkan ol, şekil al). UI/UX’te bazen düz listeler yetmiyor, biraz su gibi akışkanlık lazım. Bu demo, bildirim stack’leri, ürün carousel’leri veya oyun menüleri için ilham olabilir. 3D WebGL’nin gücü burada: Tarayıcıda native gibi hissettiriyor.
Tabii, asıl neden challenge’ı kabul etmekti. Geliştirici camiasında böyle muhabbetler olmazsa hayat sıkıcı olurdu. Winston Churchill’in bir lafı var: “Success is stumbling from failure to failure with no loss of enthusiasm.” Ben de stumbling yapıyorum ama enthusiasm yüksek. 😄
Eğer beğendiyseniz yıldız atın, fork’layın, geliştirin. Fikirleriniz varsa X’ten yazın (@HalitYesil). Belki bir sonraki challenge’ta para da gelir!
Teşekkürler,
Halit Yeşil