[10]

Kabizzu

2026

Müşteri

Piton Studios

Yıl

2026

Kapsam

Web design, scroll animation, front-end

Rol

Design / Development

Canlı Site

Siteyi ziyaret et ↗

§ Proje Detayı

Kabizzu — Mimarlık ve iç mekân stüdyosu için scroll ile ilerleyen konsept site — katmanlı fotoğraflar, yatay mekân geçişi ve kurgulu açılış.

Kabizzu, mimarlık ve iç mekân odaklı bir stüdyo için tasarladığımız konsept site. Krem ve zeytin tonları, büyük serif tipografi ve scroll ile ilerleyen katmanlı görseller üzerine kurulu; açılışta iki sıralı fotoğraf şeridi merkezde toplanıp tam ekran kapağa dönüşüyor, ardından dört konsept mekân dikey kaydırmayla yatay olarak geziliyor.

Site framework ve build adımı olmadan, saf HTML, CSS ve JavaScript ile yazıldı; yumuşak kaydırma için yalnızca Lenis kullanıldı. Scroll geometrisi DOM'dan bağımsız bir modülde tutulup otomatik test ediliyor. Azaltılmış hareket tercihi, klavye erişimi, mobil düzen ve yerel WebP görsel ile fontlar baştan hesaba katıldı. Projeler, görseller ve metinler bir tasarım konseptini temsil eder; formlar demodur.

Scroll AnimationVanilla JSLenisArchitecture

Problem

Kabizzu, Piton Studios'un kendi inisiyatifiyle hazırladığı bir konsept çalışma; gerçek bir müşteri ya da gerçekleşmiş proje iddiası yok. Hedef, mimarlık sitelerinde alışılmış statik galeri yerine mekânı kaydırdıkça 'gezdiren' bir anlatım kurmaktı: kurgulu bir açılış, farklı hızlarda ilerleyen fotoğraf katmanları, yatay ilerleyen mekân sahnesi ve renk geçişleri. Bütün bunların ağır bir framework'e yaslanmadan, mobilde ve azaltılmış hareket tercihinde de okunabilir kalması gerekiyordu.

Çözüm

Site build adımı olmayan statik bir yapı: tek HTML, CSS ve birkaç JavaScript modülü. Açılış zaman çizelgesi ayrı bir modülde; görsel ve font yüklemesini bekliyor, geç düğmesi, Escape, azaltılmış hareket ve hata durumunda kendiliğinden açılıyor. Scroll'a bağlı hesaplar DOM'a dokunmayan saf fonksiyonlarda tutuluyor ve Node test runner ile test ediliyor. Dört konsept mekân dikey kaydırmayla yatay ilerliyor; her görsel yeşil zeminde büyüyüp çerçevesine dönüyor. Menü hover ile açılıyor ama dokunma ve klavyeyle de kullanılabiliyor. Proje formu demo: talep cihazda oluşturulup indiriliyor, sunucuya veri gönderilmiyor. Bir doğrulama betiği yerel varlıkları, bağlantı hedeflerini ve görsel boyutlarını kontrol ediyor.

Öne çıkan teknik kararlar

Framework ve build adımı yok: saf HTML, CSS ve JavaScript; tek bağımlılık sabit sürümlü Lenis.
Görsel ve font yüklemesini bekleyen, atlanabilen ve hata durumunda kendiliğinden tamamlanan kurgulu açılış.
Dikey kaydırmayla yatay ilerleyen dört mekânlık sahne ve siyah-beyazdan renkliye geçen süreç satırları.
Scroll geometrisi DOM'dan bağımsız; açılış, menü ve hareket mantığı 18 otomatik testle korunuyor.
Azaltılmış hareket tercihi, klavye erişimi, mobil düzen; yerel WebP görseller ve yerel fontlar.

Kullanılan teknolojiler

HTMLCSSJavaScriptLenisWebPNode test runnerVercel

Sonuç

Sonuç, canlıda yayınlanan ve masaüstünde olduğu kadar mobilde de akıcı ilerleyen bir konsept stüdyo sitesi. Mimarlık, iç mimarlık ve butik markalar için editoryal görünümlü, hareketle anlatan siteler kurma yetkinliğimizi gösteriyor. İç mekân görselleri bu konsept için yapay zekâ ile üretildi; gerçek bir uygulamada yerlerini stüdyonun kendi proje fotoğrafları alır.