Bu siteyi nasıl yaptık: dolmen, strata ve scroll'a bağlı zaman

Bir stüdyonun en zor müşterisi kendisidir. Brief yok, bütçe toplantısı yok, 'müşteri ne der' filtresi yok — sadece boş bir sayfa ve 'bizi anlatsın' gibi ölçülemez bir hedef var. Bu yazı, bu sitenin yapım kaydı: konseptin nereden çıktığı, hangi kararları neden verdiğimiz ve yolda öğrendiklerimiz.

İsimden konsepte: dolmen

Konsept aramaya isimden başladık. Dorven, taş çağının mühendislik harikası dolmeni çağrıştırıyor: kesme taşların hassas dengeyle üst üste bindirilmesiyle kurulan ve binlerce yıl ayakta kalan yapılar. Yazılım da böyle inşa edilir — katman katman; her katman altındakine güvenir ve iyi kurulmuşsa zamana dayanır. Metafor o kadar yerine oturdu ki logoya kadar sızdı: markamızdaki D, üç yatay strata katmanının kesitidir; en üst katman dolmenin kapak taşı gibi hafifçe taşar.

Bu fikir siteye üç kelimeyle çevrildi: katman, kesit, derinlik. Scroll derine inmektir, her sayfa bir kesittir, içerik damardır. 'Yazılım stüdyosu = uzay, neon, terminal' klişesinin tam karşısında durmak istedik; malzemesi olan, elle tutulur bir dünya.

Sanat yönetimi: taş ocağının paleti

Palet taş ocağından geliyor. Koyu zemin bazalt — siyah değil, soğuk volkanik koyuluk. Açık zemin kuvars — kâğıt değil, cilalı taş sıcaklığı. Vurgu rengi verdigri, mikro-vurgu bakır. Bakırı seçmemiz tesadüf değil: devre kartlarındaki izler bakırdır ve bakır oksitlenince verdigri olur. Taşın sabrı ile bakırın iletkenliği — Dorven'in iki yüzü. Tipografide Bricolage Grotesque'in yontulmuş eklemleri taş işçiliğini çağrıştırdığı için display fontu o oldu; metin Instrument Sans'a, ölçüm etiketleri Spline Sans Mono'ya emanet.

• Site açık zemin ağırlıklı: yaklaşık %60 kuvars, %30 bazalt, %8 verdigri, %2 bakır.
• Bakır sayfa başına en fazla bir-iki kez görünür; canlı sinyaldir, süs değil.
• Derinlik gölgeyle değil katman bindirmesiyle kurulur: bir blok diğerinin üstüne taşar.
• Fade tek başına yasak: her reveal, hafif y-translate + clip-path ile 'katman sıyrılması' gibi açılır.

Hero motoru: video değil, kare dizisi

Açılış sahnesinin scroll'a bağlı akmasını istiyorduk: kaydırdıkça zamanda ilerleyen, bıraktığında duran bir yolculuk. İlk akla gelen çözüm, bir video etiketini currentTime üzerinden scroll'a bağlamak. Denedik ve vazgeçtik: video kodekleri kareler arasında gezinmek için değil, ileri oynatmak için optimize edilir. currentTime'ı hızla değiştirdiğinizde tarayıcı en yakın keyframe'e atlar; sonuç, scroll ile senkron gitmeyen, titreyen bir görüntü — özellikle Safari'de.

Bunun yerine sahneyi kare dizisine çevirdik: sahne başına yüzlerce webp karesi, tek bir canvas ve scroll ilerlemesini kare indeksine eşleyen küçük bir motor. Kareler aralıklı ön yüklenir, çizim scroll olayında değil requestAnimationFrame döngüsünde yapılır ve hedef kareye lerp ile yaklaşılır — böylece hızlı kaydırmada bile görüntü ağır bir kütle gibi yumuşak frenler. prefers-reduced-motion açıksa motor hiç kurulmaz; sahne poster kareye düşer, işlev kaybı sıfır.

Yolda öğrendiğimiz en iyi ders IntersectionObserver'dan geldi. Reveal animasyonlarımız clip-path: inset() kullanıyor; clip görseli gizler ama elemanın layout kutusunu küçültmez. Observer bu yüzden elemanı 'ekranda' sanıp animasyonu, kullanıcı daha hiçbir şey görmeden tetikliyordu. Çözüm basit ama öğreticiydi: gözlemi clip uygulanan elemana değil sarmalayıcıya bağlamak ve eşiği görünür yüksekliğe göre ayarlamak. Ders: tarayıcıda 'görünmez' ile 'kutusu yok' aynı şey değildir.

Medya: Higgsfield süreci

Sitedeki büyük görseller — hero sahnesi, bölüm kapakları — Higgsfield ile üretildi. Ama süreç 'AI'a yazdık, çıktı' değil: önce sanat yönetimi dokümanı prompt diline çevrildi (bazalt doku, kuvars ışığı, mineral katmanlar, insansız kadraj), sonra onlarca üretimden sanat yönetimine uyanlar elendi, seçilenler kırpılıp webp'e sıkıştırıldı. AI burada fırça; elin sahibi hâlâ insan.

Sonuç: site de bir vaka

Bu site bizim ilk vakamız: brief'i kendimize yazdık, kapsamı kendimize karşı savunduk, teslim tarihini kendimize karşı kaçırıp kendi metodolojimizle geri kazandık. Konseptten motora her karar burada, Journal'da not düşülecek — fiyatlandırma felsefemizi anlattığımız yazı da şimdiden yayında. İşlerimizin geri kalanı /isler sayfasında; bir sonraki katmanda görüşürüz.