Koca Ventures Ltd
71-75 Shelton Street
Covent Garden, London
WC2H 9JQ, United Kingdom
Registered in England & Wales16231043

PREMIUM WEB VE 3D

Sinematik web,mühendislikle kurulmuş.

Ödül seviyesinde hareketi de yapan yazılım mühendisleriyiz. Sitenizin ağır 3D ve scroll-scrub katmanını elle kurar, bir Core Web Vitals bütçesine bağlarız — sinematik ve hızlı; şansla değil, mühendislikle.

Scroll-scrub girişi — şu anda bir lüks gözlük markası için geliştirdiğimiz, tüm filmi kapsayan bir canvas scrub'ı (yakında)
YETKİNLİKLER

Sinematik katman, elle kurulmuş

01

Scroll ile ilerleyen anlatım

GSAP, ScrollTrigger ve Lenis ile sinematik kaydırma anlatıları. Scroll'a, bir kurgucunun zaman çizelgesine yaklaştığı gibi yaklaşırız — on beş değil, iyi ayarlanmış birkaç sahne — hikâye karmaşa değil, işçilik olarak okunur.

02

Gerçek zamanlı 3D (Three.js / R3F)

Three.js ile elle kurulmuş WebGL sahneleri; sahne bileşen kompozisyonundan kazanıyorsa React-Three-Fiber. İş yükü gerektirdiğinde WebGPU — kimse boş bir tuvalle kalmasın diye her zaman otomatik WebGL2 yedeğiyle.

03

Kare dizisi scroll-scrub (Apple tarzı)

Apple tarzı giriş — karelere çözülmüş bir filmin, siz kaydırdıkça tuvale çizilmesi — kütüphaneden eklediğimiz değil, mühendisliğini yaptığımız bir teknik. Şu anda bir lüks gözlük markası için bir tanesini kuruyoruz.

04

Shader ve materyal çalışması

Özel shader'lar ve materyaller; WebGPU yolunda node tabanlı TSL dahil, ölçülü biçimde kullanılıyor. Gelişmiş efektler optimizasyon ve fallback'lerle dengeleniyor, böylece görsel şölen performans bütçenize asla mal olmuyor.

05

Vektör hareket (Lottie / Rive)

İkonlar ve illüstrasyonlar için Lottie ile tasarımcı yapımı vektör hareket; animasyonun durum tutması ve veriyle sürülmesi gerektiğinde Rive. Küçük, keskin, çözünürlükten bağımsız — hafif hareket için doğru araç.

06

Next.js üzerine kurulu

Sinematik katman, Next.js üzerinde izole ve yalnızca istemcide çalışan adalarda yaşar; sitenin kalanı statik kalır. 3D bir sitede ana performans kolu hydration maliyetidir ve onu bilinçli olarak bütçeleriz.

PERFORMANS VE ERİŞİLEBİLİRLİK SÖZÜ

İlk shader'dan önce belirlediğimiz bir Core Web Vitals bütçesi

LCP≤ 2,5sn

Largest Contentful Paint

Hızlı bir poster / ilk kare erken boyanıyor — ağır bir canvas hero, en büyük boyamayı asla engellemiyor.

INP≤ 200ms

Interaction to Next Paint

Geçmesi en zor olanı. Uzun ana iş parçacığı görevlerini bölüyoruz ki sayfa hareket hâlindeyken bile tepkisel kalsın.

CLS≤ 0,1

Cumulative Layout Shift

Her tuval ve medya öğesi için alan baştan ayrılır; geç yüklenen 3D, yerleşimi asla kaydırmaz.

Üçü de gerçek kullanıcıların 75. yüzdelik diliminde ölçülür — hedefler laboratuvar koşusunda değil, sahada tutmalıdır. Hareket azaltma tercihli kullanıcılar varsayılan olarak temiz, hızlı, statik bir deneyim alır.

NASIL ÇALIŞIYORUZ

Storyboard'dan, tuttuğumuz bir bütçeye

01

Keşif ve storyboard

Hikayeyi build'den önce çıkarıyoruz — markayı hangi birkaç sahnenin taşıdığını, scroll vuruşlarının nereye düştüğünü ve sitenin iyi görünmenin ötesinde ne yapması gerektiğini.

02

CWV + erişilebilirlik bütçesini belirleyin

Core Web Vitals hedeflerini ve erişilebilirlik kurallarını — hareket azaltma, klavye, duraklatma kontrolleri — baştan birlikte belirleriz; sinematik katman bunlara bağlı tutulur.

03

Hero sahnesinin prototipini çıkarın

Önce en zor sahneyi kurarız — scroll-scrub veya 3D merkez parçası — ve bütçeyi gerçek bir orta sınıf telefonda tutturduğunu kanıtlarız.

04

İzole adacıklar olarak kurun

Ağır katman, görünüm alanına yaklaşınca tembel yüklenen ve yalnızca istemcide çalışan adalar olarak kurulur; sayfanın kalanı statik ve sunucuda render edilmiş kalır.

05

Varlık hattını optimize edin

Draco / Meshopt sıkıştırmalı GLTF, KTX2 dokular, cihaz başına sınırlandırılmış poligon bütçeleri ve yerini hak ettiğinde sadeleştirilmiş bir mobil sahne.

06

Yayına alın ve ölçün

Yayına alır ve yalnızca laboratuvardaki Lighthouse skorunu değil, gerçek kullanıcı metriklerini izleriz. Bütçe bir kez söylenen bir rakam değil, lansman sonrasında da tuttuğumuz bir taahhüttür.

Ödül seviyesinde hareket, mühendisliğini yaptığımız bir zanaattır; kurduğumuz bir eklenti değil — yığın proje bazında eklenir ve bütçeye göre kurulur, güvenmek zorunda kaldığınız bir kara kutu olarak teslim edilmez. Kazanmadığımız bir ödülü değil, kendimizi bağladığımız işçiliği ve performansı vaat ederiz.

Zaten animasyonlu siteler teslim ediyorsunuz: bu, şu çalışmamızın bir üstündeki premium 3D katman: animasyonlu web siteleri çalışmamız. Aynı mühendislik çıtası, sinematik ve gerçek zamanlı 3D katmanında daha yüksek bir tavan.

SORULAR

Net yanıtlar

Peki ya mobil ve erişilebilirlik?

İkisi de sonradan yamalanmaz, baştan tasarlanır. Hareket azaltma tercihli kullanıcılar varsayılan olarak sakin, tamamen okunur bir site alır; zorunlu hareket kaldırılmaz, yerine başka bir şey konur. Mobil; otomatik WebGL2 yedeğiyle sadeleştirilmiş bir sahne veya statik bir afiş çalıştırır — otomatik oynatma da her zaman bir duraklatma kontrolü alır.

Neden sadece Webflow ya da Framer kullanmıyoruz?

Dekoratif 3D için — dönen bir küre, hafif paralaks — site kurucular yeterlidir; bunu da söyleriz. WebGL shader'ları, fizik, optimize GLTF veya etkileşimli Three.js sahneleri gerektiği anda kurucu tavanına çarpar; o katmanın elle yazılması gerekir ve biz onu bütçeye göre kurarız.

Bir tasarım stüdyosundan farkınız ne?

Birçok stüdyo hareketi tutturur ama işi takılı teslim eder — INP veya CLS'den kalır, mobilde bozulur, hareket azaltmayı yok sayar. Aynı görsel tavanı, üzerine mühendislikle getiririz: Core Web Vitals bütçeleri, erişilebilirlik, varlık hatları ve yedek davranışlar. Çoğu zaman, bir tasarım stüdyosunun performanslı yapımı taşerona verdiği ortağız.

Nasıl fiyatlandırılıyor?

İş bazında — liste fiyatı yok. Tipik şekil: kısa, ücretli bir kapsam çalışması, sabit kapsamlı bir kurulum, ardından isteğe bağlı bir aylık anlaşma. Sorunu anlatın, dürüstçe kapsamlandıralım.

Koda biz mi sahip oluyoruz, yoksa size mi bağımlı kalıyoruz?

Sahibi sizsiniz. Açık, standart araçlarla — GSAP, Lenis, Three.js, React-Three-Fiber — kendi deponuzda elle kurarız; arada tescilli bir kurucu runtime'ı yoktur. Kullanıcı başı vergi yok, terk edemeyeceğiniz bir platform yok; kendi mühendisleriniz genişletebilir.

3D bir web sitesi SEO'ya zarar verir mi?

Bir Core Web Vitals bütçesine göre kurulmuşsa hayır — kuruş biçimimizin bütün amacı bu. İçerik sunucuda render edilmiş ve taranabilir kalır, 3D katman istemcide tembel yüklenir; LCP, INP ve CLS hedefleri ilk shader'dan önce belirlenir.

3D bir web sitesi ne kadar sürede yapılır?

Odaklı bir hero görseli kurulumu tipik olarak birkaç hafta sürer; gelişmiş çok sahneli veya etkileşimli bir lansman birkaç ay alır. Aşamalı teslim öneririz — önce hızlı, sinematik bir hero yayınlayın, sonra yeniden kurulum olmadan çok sahneli işe büyüyün. Takvimi kapsam görüşmesinden sonra veririz.

Last reviewed:

KONUŞMAYA HAZIR MISINIZ?

Sitenin ne yapması gerektiğini bize anlatın

Aklınızdaki marka anını, lansmanı veya konfigüratörü paylaşın; baştan yazılı bir Core Web Vitals bütçesiyle sinematik bir kurulumu kapsamlandıralım.