[14]

VELAIR

2026

Müşteri

VELAIR

Yıl

2026

Kapsam

3D web experience, scroll animation, WebGL

Rol

Design / Development

Canlı Site

Siteyi ziyaret et ↗

§ Proje Detayı

VELAIR — Scroll ile ilerleyen sinematik 3D özel jet deneyimi — bulut geçişi, açılan kabin ve yatay uçuş.

VELAIR, özel jet deneyimini scroll ile ilerleyen sinematik bir 3D anlatıya dönüştüren konsept çalışmamız. Tepeden jet görünümü, shader tabanlı bulut geçişi, açılan kabin ve panel arkasından yatay uçuş tek bir doğal scroll akışında birleşiyor; uçak, kodla üretilmiş özgün parametrik bir model.

Next.js, React Three Fiber, Drei ve GSAP ScrollTrigger ile kurulan deneyimde tek bir ilerleme değeri kamerayı, jeti ve bulutları yönetiyor; boşta sürekli render yok. Hareketi azalt tercihi, WebGL olmadığında aynı modelden üretilmiş statik görseller ve mobil kadraj uyarlamasıyla performans ve erişilebilirlik birlikte gözetildi.

Three.jsReact Three FiberGSAPNext.js

Problem

VELAIR, Piton'un kendi inisiyatifiyle başlattığı bir konsept çalışma; gerçek bir müşteri ya da uçak üreticisi yok. Hedef, özel jet temalı bir portfolyo parçasını satın alınmış 3D modellere ya da video kesitlere dayandırmadan, tarayıcıda üretilen özgün bir geometriyle kurmak; tepeden görünüm, bulut geçişi, kabin açılımı ve yatay uçuşu tek bir doğal scroll akışında kesintisiz birleştirmekti. Aynı zamanda WebGL desteklemeyen cihazlarda, hareketi azalt tercihinde ve dar mobil ekranlarda deneyimin okunabilir kalması, tek canvas ve tek playhead ile performansın korunması gerekiyordu.

Çözüm

Next.js App Router'da içerik server component olarak kalıyor; Three.js sahnesi yalnızca istemci tarafında lazy yükleniyor. Uçak, tarayıcıda üretilip parça parça birleştirilen parametrik bir geometri — indirilen bir 3B model dosyası yok. GSAP ScrollTrigger tek bir 0–1 ilerleme değeri üretiyor; saf bir fonksiyon bu değeri kamera, jet ve bulut pozuna dönüştürüyor, ayrı bir yardımcı da viewport yüksekliğine göre zoom ve mobil kadrajı ayarlıyor. Sahne talep üzerine render ediliyor: kare yalnızca scroll olduğunda çiziliyor, kare başına React state veya DOM ölçümü yok. WebGL2 desteklenmediğinde, context kaybında ya da hareketi azalt tercihinde aynı modelden üretilmiş statik posterlere geçiliyor; kabin seçim butonları ekran okuyucularla erişilebilir. Bölüm sınırları, poz örneklemesi ve mobil kadraj Node test runner ile otomatik test ediliyor.

Öne çıkan teknik kararlar

Uçak dışarıdan içe aktarılan bir GLB değil, tarayıcıda parametrik olarak üretilip birleştirilen özgün bir geometri.
Tek bir GSAP ScrollTrigger ilerleme değeri kamerayı, jeti ve bulut shader'ını aynı anda besliyor; kare başına React state kullanılmıyor.
Talep üzerine render: sahne yalnızca scroll olduğunda yeniden çiziliyor, boştayken GPU harcanmıyor; piksel yoğunluğu 1–1.5 aralığında sınırlı.
WebGL2 desteklenmediğinde, context loss'ta veya hareketi azalt tercihinde aynı modelden üretilmiş statik posterlere sorunsuz geçiş.
Bölüm sınırları, poz örneklemesi ve mobil kadraj için otomatik testler Node test runner ile çalışıyor.

Kullanılan teknolojiler

Next.jsReactTypeScriptThree.jsReact Three FiberDreiGSAPVercel

Sonuç

Sonuç, canlıda yayınlanan ve altı bölümü tek scroll akışında kesintisiz gezdiren bir konsept demo. WebGL yokluğunda, azaltılmış harekette ve mobilde okunabilir kalan yapısıyla üç boyutlu anlatım ve motion tasarımı yetkinliğimizi gösteren bir referans niteliğinde. Kendi dokümantasyonumuzda not ettiğimiz gibi, lisanslı sanatçı modeli ve cihaz bazlı performans ölçümleri sonraki üretim turunun konusu.