"The overnight" nasıl yapıldı?

Sayfa bir gece: tepede dolunay, scroll ettikçe gökyüzünde alçalıyor; ortadan geçen zaman hattında Auto Mode'un gecesi saat saat kartlara dökülüyor; sona yaklaşınca yıldızlar sönüyor, ufuk turuncuya dönüyor ve güneş doğarken "Wake up to shipped." yazıyor.

Neden bu mimari?

Kampanyanın önceki sayfaları ortak bir iskelet paylaşıyordu (sol-alt dev başlık + tam ekran simülasyon + pin sahne). Kullanıcı geri bildirimi netti: şablonu kır. Bu sayfa o yüzden zıt tercihlerle kuruldu:

Ortalanmış, havadar hero: sol-alt blok yok. Tek pill, tek dev başlık, tek cümle.
Pin yok: sayfa doğal akışta; sinematiklik scroll-bağlı gök cisimlerinden geliyor.
Ultra-light tipografi: Bricolage yerine yalnızca Geist; başlıklar font-weight: 200, vurgu kelimeleri 550. İncelik ile ağırlığın kontrastı, boyut kontrastından daha zarif.
Boot sayacı yok: gece kendiliğinden başlar.

Gök sahnesi: üç fixed katman

.skyN  → gece degradesi (her zaman altta)
.skyD  → şafak degradesi; opacity = dawn
.moon  → CSS radyal disk; transform scroll'dan
.sun   → alt merkezde radyal parıltı; şafakta doğar
#stars → tek canvas; twinkle, şafakta söner

apply() {  // her rAF karesinde
  p = scrollY / (scrollHeight - innerHeight);      // sayfa ilerlemesi
  dawn = max(0, (p - .62) / .38);                  // son %38'de şafak
  moon: translate(-p*26vw, p*58vh) scale(1 - p*.28)
  skyD.opacity = dawn; sun doğar; yıldızlar (1 - dawn*.93)
}

Ay DOM'da bir div: radyal gradyan + iki katman glow gölgesi. Kartlar z-index olarak ayın önünde; ay alçalırken kartların arkasından geçiyor ve sahneye derinlik veriyor.

Zaman hattı

Hat: konteynerin ::before'u, uçları transparan mavi bir dikey çizgi. Mobilde sola yaslanır, kartlar tek kolona düşer.
Kartlar sol-sağ zigzag (nth-child(odd/even)); her kartta saat pili, başlık, mono code vurguları ve ikisinde gerçek ürün görüntüsü.
Olaylar ürün gerçeği: izole worktree açılışı, seri kuyruk inişi, marker'ları korunarak park eden conflict (amber kart), $4.00'da duran bütçe (amber kart), parked görevin temiz rebase ile dönüşü, ff-only main.
Görünürlük IntersectionObserver: kart yanarken hattaki nokta da parlıyor (.on .dot glow).

Sabah defteri

Gecenin özeti dört dev rakam: 7 landed · $9.12 · 0 force-pushes · 1 parked-then-landed. Liste değil, tipografik blok: 200 ağırlığında 72px rakamlar, altlarında mono etiketler, aralarında ince dikey cetveller. Şafak degradesi bu bölümde yükseldiği için başlıklara hafif text-shadow eklendi (3. turda yakalanan kontrast düzeltmesi).

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

Tur 1 (yıkım): ilk sürüm kampanya iskeletindeydi (pin'li saat sahnesi). Güzeldi ama tanıdıktı; kullanıcı "farklı bir şey dene" dedi. Sayfa sıfırdan bu mimariyle yazıldı.
Tur 2: ay-kart derinliği, zigzag ritmi ve amber kartlar doğrulandı; şafakta CTA/başlık kontrastı düşük çıktı, text-shadow ve renk düzeltmesi yapıldı.
Tur 3: mobil tek kolon, statik mod, konsol taraması, canlı deploy.

Kim yaptı? Bu sayfa Claude (Fable 5) tarafından Claude Code içinde otonom tasarlandı ve kodlandı: saf HTML/CSS/JS; GSAP bile yok, yalnızca rAF + IntersectionObserver. Denetim Playwright ekran görüntüleriyle; dağıtım Cloudflare Pages.

Sen de kur

# 1. Sayfa ilerlemesini "zamana" çevir: p = scrollY / scrollable
# 2. Gök cisimleri fixed DOM katmanları; transform'ları p'den türet
# 3. Şafak = ikinci degradenin opacity'si (kanal kanal lerp gerekmez)
# 4. Zigzag timeline: ::before hat + nth-child hizalama + IO glow
# 5. Zarafet için ağırlık kontrastı kullan: 200 vs 550
npx wrangler pages deploy ./site --project-name=my-overnight