Artibo Creative: Immersive WebGL Ajans Deneyimi
Artibo Creative'in mevcut sitesi standart bir şablondu. Hedef netti: activetheory.net ve lusion.co gibi ödül-seviyesi, 'uzay yolculuğu' hissi veren immersive bir deneyim. Site, tek bir kalıcı WebGL katmanı etrafında sıfırdan yeniden kuruldu; tüm içerik bu canlı 3D dünyanın üzerinde akıyor. Deneyimin kalbinde react-three-fiber ile kurulan kalıcı bir WebGL alanı var: scroll ve fare hareketiyle evrilen amber 'ember' parçacık akıntısı, scroll'un ortasında bir dalga yüzeyine dönüşüyor; bloom post-processing ile yörüngede süzülen 3D proje kartları sahneyi tamamlıyor. Lenis ile yumuşatılmış scroll ve GSAP ScrollTrigger sinematik bir scroll koreografisi kuruyor — açılış loader'ı, maskeyle yükselen kinetik tipografi, tam-ekran overlay menü ve sayfaya göre renk değiştiren özel iki-parçalı cursor bu dünyayı bütünlüyor. Tüm görsel kimlik custom GLSL shader'lara dayanıyor. 'Artibo Sanat' alt sayfası bilinçli olarak zıt bir dünya kurar: akan iridescent mesh-gradient zemin, editöryel Fraunces serif tipografi ve hover'da SVG displacement ile dalgalanan bir video galerisi. Tüm bu yoğun görsellik, mobil ve prefers-reduced-motion fallback'leriyle performans ve erişilebilirlikten ödün vermeden sunuluyor.
Problem
Generic, hareketsiz bir ajans sitesi markanın yaratıcılığını yansıtmıyordu. Müşteri; ziyaretçiyi ilk saniyeden içine çeken, 'vay be' dedirten ve sektörün en iyi dijital deneyimleriyle (Active Theory, Lusion) aynı ligde duran bir web varlığı istiyordu — ama bunu performanstan ve erişilebilirlikten ödün vermeden.
Çözüm
Tüm site, react-three-fiber ile kurulan tek bir kalıcı WebGL katmanı etrafında yeniden tasarlandı: GPU parçacık akıntısı, yörüngede dönen 3D proje kartları ve bloom efektleri canlı bir 'uzay' dünyası yaratıyor. Lenis + GSAP ScrollTrigger ile sinematik scroll koreografisi, custom GLSL shader'lar ve sayfaya özel iki-parçalı cursor deneyimi tamamlıyor. 'Artibo Sanat' alt dünyası iridescent gradient ve editöryel tipografiyle bilinçli bir kontrast sunarken; iletişim, Web3Forms üzerinden e-posta + CRM webhook'una bağlı camsı bir modal formla bitiyor. Mobil ve reduced-motion fallback'leriyle deneyim her cihazda akıcı kalıyor.
Ekran Görüntüleri
Ana sayfa — hero (parçacık alanı + başlık)
Görsel yakında eklenecek
