"Vault" nasıl yapıldı?

Ekranda çelik bir kasa kapısı duruyor. Scroll ettikçe çark dönüyor, sürgüler içeri çekiliyor, kapı yana kayıp içerideki mühürlü hücreleri gösteriyor; son perdede amber "denied" satırları akıyor. Tamamı tek bir canvas'ta, tek bir fizik yok, tek bir görsel dosya yok: hepsi çizim kodu.

Konsept

Findie'nin güvenlik hikâyesi üç katman: ajanlar işletim sistemi seviyesinde hapsedilir (macOS Seatbelt, Linux bwrap, Isolated katmanda container), kimlik bilgileri şifreli kasada yaşar (AES-256-GCM + OS keychain), görev worktree'sinin dışına varsayılan cevap hayır. Kasa kapısı bu üçünün tek metaforu: sayfanın scroll'u kapıyı açan el.

Kapı tamamen kodla çizili

Görsel dosya yok; metal hissi katmanlı canvas gradyanlarından geliyor:

// disk: off-center radial gradient = tepeden gelen ışık
radialGradient(dx - R*.3, cym - R*.35, ...)  // #3a4a66 → #1a2436 → #0a0e16
// fırçalanmış metal: 4 iç halka, azalan opaklık
// perçinler: 18 çift daire (parlak + koyu ofset = kabartma)
// sürgüler: 8 yönde kalın çizgi; çark döndükçe boyu kısalır
// ışık süpürmesi: clip(daire) + kayan lineer gradyan bandı

• Çark: üç kollu, merkezi göbekli; rotasyonu doğrudan scroll ilerlemesine bağlı: wheel = min(1, p*3) * 2.5π/2.
• Kapı kayması: open 0→1 olurken disk sağa R*1.55 kayar ve %12 küçülür; parallax olmadan derinlik hissi verir.
• İç oda: kapının arkasında radyal karanlık oda + raflarda "sealed" hücreleri; her hücrenin anahtar deliği farklı fazda nefes alır (sin(idle*2 + satır + sütun)).
• Deny feed: üçüncü perdede amber ✗ write ~/.ssh/id_ed25519 · denied satırları akar; her üç satırdan biri mavi ✓ ok (worktree içi izinler). Hücreler bu sırada %68 solar ki metin öne çıksın.

Scroll'un üç perdesi

ScrollTrigger.create({ trigger:'#open', pin:true, scrub:true, end:'+=280%',
  onUpdate(self){
    st.wheel = min(1, p*3) * dönüş;          // perde 1: çark + sürgüler
    st.open  = clamp((p - .34) / .33);       // perde 2: kapı kayar, oda görünür
    st.deny  = clamp((p - .70) / .26);       // perde 3: deny feed
  }});

Önceki sayfalardaki gibi ayrık segment atlamaları yerine burada üç değer sürekli scrub ediliyor: kapı, scroll'un elinde fiziksel bir nesne gibi hissettiriyor. Caption'lar yine üç segmentte değişiyor.

Marka sistemi

• Metal paleti marka mavisinin soğuk ailesinden türedi (#3a4a66 → #0a0e16); accent yine #037BFC, tehlike vurgusu ölçülü amber.
• Bricolage Grotesque 800 + Geist/Geist Mono; yüksek radius butonlar; doctrine hover-invert satırları: kampanyanın ortak dili.
• Kapı masaüstünde sağa hizalı (W*.64) ki dev başlıkla çakışmasın; mobilde ortalanır, başlık altta kalır.

Üç turlu eleştiri döngüsü

1. Tur 1: kapı ortadaydı ve "Inside the walls" başlığıyla çakışıyordu; sağa kaydırıldı, yarıçap küçültüldü.
2. Tur 2: deny satırları mühürlü hücrelerle karışıyordu; hücreler feed sırasında soldurulup satırlar büyütüldü, odaya ince mavi çevre halkası eklendi.
3. Tur 3: mobil kompozisyon, konsol taraması, canlı deploy doğrulaması.

Sen de kur

# 1. Metaforu mekanikleştir: scroll = kapıyı açan el
# 2. Metal = off-center radial + iç halkalar + perçin çiftleri + ışık süpürmesi
# 3. Üç sürekli değer scrub et (wheel/open/deny); segment değil akış
# 4. Metin sahnesi girerken arka öğeleri soldur
# 5. Dev nesneyi başlıktan uzağa hizala; mobilde yeniden ortala
npx wrangler pages deploy ./site --project-name=my-vault