[11]

3 Monkeys Bozüyük

2026

Müşteri

Piton Studios

Yıl

2026

Kapsam

Web design, scroll animation, WebGL

Rol

Design / Development

Canlı Site

Siteyi ziyaret et ↗

§ Proje Detayı

3 Monkeys Bozüyük — Burger restoranı için konsept web sitesi — kaydırdıkça katman katman birleşen burger ve gerçek zamanlı WebGL dumanlı hero.

3 Monkey Burger House'un Bozüyük şubesi için hazırladığımız, Türkçe ve mobil uyumlu bir web sitesi konsepti. Sinematik ana ekranda üç burgerli sahnenin üzerinde gerçek zamanlı duman süzülüyor; sayfa kaydırıldıkça altı ayrı fotoğraf katmanı — ekmek, sos, cheddar, köfte, yeşillik — tek bir burgerde birleşiyor. Ana sayfa, menü, hikâyemiz ve iletişim ayrı sayfalar olarak kurgulandı.

Next.js App Router, React 19 ve TypeScript ile geliştirildi. Burger sahnesi bir 3B model değil, CSS perspektifiyle kurulmuş 2.5D bir katman düzeni; duman ise bağımlılıksız bir WebGL shader'ı. Bu bağımsız bir tasarım konseptidir, restoranın resmî sitesi değildir; sahne görselleri temsilîdir, fiyat ve doğrulanamayan bilgiler gösterilmez.

Next.jsScroll AnimationWebGLRestaurant

Problem

Bu çalışma Piton Studios'un kendi inisiyatifiyle hazırladığı bağımsız bir konsept; restoranın resmî sitesi değil ve ısmarlanmış bir müşteri işi olarak sunulmuyor. Hedef, yerel bir burger restoranı için iştah açan, hareketli ama hafif bir site kurmaktı: ürünü anlatan bir scroll sahnesi, güçlü bir hero ve menüye hızlı erişim. Bunu ağır bir 3B model ya da video yüklemeden, mobilde ve düşük donanımda akıcı kalacak şekilde yapmak gerekiyordu.

Çözüm

Burger sahnesi tek bir fotoğraf sprite'ındaki altı katmandan oluşuyor; katmanlar CSS perspektifi ve kaydırma ilerlemesiyle açılıp birleşiyor, WebGL modeli gerekmiyor. Hero'daki duman, bağımlılıksız bir WebGL shader'ı: 30 fps ile sınırlı, ekran dışındayken, sekme gizliyken ve azaltılmış hareket seçiliyken duruyor; WebGL yoksa arayüz çalışmaya devam ediyor. Animasyonlar pasif scroll dinleyicisi ve requestAnimationFrame ile yürütülüyor, tekerlek kaydırması Lenis ile yumuşatılıyor. Mobil için ayrı dikey hero kompozisyonu, klavyeyle kullanılabilen mobil menü ve Escape desteği var. Telefon, Instagram, harita ve güncel menü bağlantıları şubenin gerçek kanallarına gidiyor; backend, ödeme, üyelik ya da kişisel veri toplama yok.

Öne çıkan teknik kararlar

Kaydırdıkça birleşen altı fotoğraf katmanı: CSS perspektifli 2.5D sahne, 3B model yok.
Bağımlılıksız WebGL duman shader'ı; 30 fps sınırı, ekran dışında ve gizli sekmede otomatik duraklama.
Mobil için ayrı dikey hero kompozisyonu ve klavyeyle kullanılabilen mobil navigasyon.
JavaScript olmadan da görünür kalan içerik ve azaltılmış hareket tercihi desteği.
Fiyat, ödül ya da doğrulanamayan çalışma saati yok; güncel bilgi için şubenin kendi kanallarına yönlendirme.

Kullanılan teknolojiler

Next.jsReactTypeScriptWebGLCSSLenisVercel

Sonuç

Sonuç, canlıda yayınlanan dört sayfalık bir konsept site: güçlü bir hero, ürünü katman katman anlatan bir scroll sahnesi ve menüye doğrudan erişim. Restoran, kafe ve yerel işletmeler için hafif ama akılda kalan siteler kurma yaklaşımımızı gösteriyor. Sahne ve menü görselleri temsilîdir ve bu konsept için yapay zekâ ile üretildi; marka ve logo ilgili sahibine aittir.