Bu sayı nasıl dizildi?

Findie'nin Auto Mode özelliği bir ürün sayfasıyla değil, bir gece baskısıyla duyuruldu: "Software ships while the city sleeps." Bu rehber, o gazetenin dizgisini anlatır: interaktif halftone motoru, damgalanan manşet, mühür ve tipografi sistemi.

Konsept

Auto Mode'un vaadi tek cümle: sen uyurken yazılım çıkar. "Gece boyu çalışan ekip + sabah çıkan baskı" doğrudan gazete metaforu. O yüzden sayfa bir landing gibi değil, 1960'lar broadsheet gazetesi gibi dizildi: blackletter masthead, kicker + dev Playfair manşet, dört kolonlu "haberler", tirajlı espri barındıran seri ilanlar (classifieds) ve editör mührü.

Kural: dünyayı seçtiysen her ayrıntı o dünyadan gelmeli. CTA butonu bile "GET THE MORNING BUILD" diyor; tarih satırı JavaScript ile her gün gerçek tarihi basıyor; fotoğraf altı "Photo: nobody was at the desk".

Tipografi sistemi (4 aile, 4 rol)

UnifrakturMaguntia (blackletter): yalnızca masthead. New York Times tavrı.
Playfair Display 900: manşetler. Dev boyut, sıkı letter-spacing.
Oswald: kicker, etiketler, butonlar. Gazete ara başlığı kondansesi.
Source Serif 4: gövde metni ve italik deck.

Dördü de woff2 indirilip self-host edildi. Palet üç mürekkep (koyu gece baskısı): gece kâğıdı (#0c0e13), açık mürekkep (#e6e9f2), Findie mavisi (#3ba0ff). Kâğıt dokusu: sabit SVG noise + köşelerde sepya vinyet (iki fixed katman).

İmza teknik 1: interaktif halftone

Manşet fotoğrafı gerçek ürün ekran görüntüsü, ama gazeteye "tram" (halftone) olarak basılıyor ve fare mürekkebi canlandırıyor:

// 1) görüntüyü hücre çözünürlüğünde örnekle (5.2px hücre)
o.filter = 'ton eğrisi (taban + gamma) contrast(1.05)';  // koyu baskıda parlak pikseller mürekkep olur
o.drawImage(img, 0, 0, cols, rows);
// 2) koyuluk -> nokta yarıçapı (gamma sıkıştırmalı)
lum[i] = min(.8, pow(darkness, 2.1));
// 3) statik tram bir kez çizilir (49.000 nokta)
// 4) fare katmanı: yalnızca 120px yarıçaplı bölge her karede yeniden çizilir
//    mavi "misregistration" hayaleti + siyah mürekkep, nokta %90 şişer

Performans sırrı: statik tram tek sefer çizilir; fare etkisi ayrı bir üst canvas'ta sadece kirli bölgeyi günceller (~1.900 nokta/kare, 60fps).
Koyu arayüz görüntüsünü gazetede okunur kılan şey iki kademeli ton eğrisi: önce ton eğrisi (taban + gamma), sonra pow(x, 2.1) gamma sıkıştırması ve 0.8 tavan. İlk denemede bunlar yoktu ve fotoğraf mürekkep gölüne dönmüştü; ekran görüntüsü denetimi yakaladı.
Mavi hayalet nokta, hafif kaymış ikinci baskı plakası (misregistration) hissi verir: matbaa hatası estetiği.

İmza teknik 2: damgalanan manşet

Manşet harf harf, rastgele sırayla ve hafif dönüş açısıyla "baskıdan iner" (GSAP):

gsap.from('#headline .ch', {
  opacity: 0, scale: 1.7, y: -14,
  rotation: () => gsap.utils.random(-8, 8),
  ease: 'power4.out', stagger: { each: .035, from: 'random' }
});

Tuzak: harfleri tek tek span'e bölerseniz tarayıcı kelime ortasından satır kırar ("WHILE" → "WHI-LE"). Çözüm: her kelimeyi white-space:nowrap sarmalayıcıya koyup harfleri onun içinde bölmek. Bu hatayı ikinci turda ekran görüntüsü yakaladı.

İmza teknik 3: mühür

"Verdict" bölümüne gelindiğinde mavi onay mührü ŞAK diye basılır: scale 2.6 → 0.94 → 1.05 → 1 zıplamalı keyframe + -24° → -12° dönüş. Mühür saf SVG: iki halka, textPath ile çevre yazısı, ortada üç satır. Kenar titremesi feTurbulence + feDisplacementMap filtresinden: vektör mührü lastik damga gibi pürüzlendirir. koyu baskıda mix-blend-mode: screen ile kâğıttan "parlar".

Gazete dizgisinin CSS'i

Kolonlar gerçek dizgi gibi: column-count: 4 + column-rule ince cetvel; mobilde 1'e düşer.
İlk haberin ilk harfi mavi drop cap: initial-letter: 3.
Çift cetvel kuralı her yerde: border: 4px double masthead ve verdict bölümünde.
Butonlar letterpress kutusu: sert köşe, 2px çerçeve, ofset gölge (box-shadow: 5px 5px 0), hover'da kutu kalkar gölge büyür.
Marquee şeridi: siyah zemin, Oswald, yıldız ayraçlar; CSS @keyframes ile sonsuz kayar, içerik JS ile bir kez çoğaltılır.

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

Tur 1: manşet üç dengesiz satıra kırıldı, deck'te "fast-forwards" heceden bölündü, CTA fold dışında kaldı. Font ölçeği ve boşluklar yeniden ayarlandı, hyphens:none + kırılmaz tire eklendi.
Tur 2: harf-span kelime kırılması ("WHI-LE") ve mürekkep gölü halftone yakalandı; kelime sarmalayıcıları ve iki kademeli ton eğrisi eklendi. Kolon içi küçük görsele gri-tram CSS filtresi verildi.
Tur 3: mobil tam sayfa, konsol taraması, canlı deploy doğrulaması.

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

Sen de diz

# 1. Ürün vaadini bir dünyaya çevir (gece baskısı = auto mode)
# 2. 4 rollü tipografi: masthead / manşet / etiket / gövde
# 3. Halftone: örnekle -> gamma eğrisi -> statik tram + kirli-bölge fare katmanı
# 4. Harf damgası: kelime sarmalayıcı + GSAP random stagger
# 5. Mühür: SVG textPath + feTurbulence pürüzü + multiply
npx wrangler pages deploy ./gazete --project-name=my-press