"Grove" nasıl yapıldı?

Ekranın altından mavi biyolüminesan kökler filizleniyor; imlecine doğru eğiliyorlar, dallanma noktalarında provider çipleri açıyorlar, damarlarında besin pulsları akıyor. Bütçe tavanına çarpan dal amber uçla duruyor. Konu: sekiz modelin tek kök sisteminde yaşaması.

Konsept

Findie'de model, ürünün değil kartın özelliğidir: zor işe Opus, angaryaya Haiku, canın istediğinde Codex. Sekiz sağlayıcı (Claude, Codex, Gemini, Cursor, Copilot, OpenCode, GLM, MiniMax) aynı board'u, aynı kuyruğu, aynı disiplini paylaşır. Bunun doğadaki karşılığı tek kök sisteminden çıkan farklı dallar; bütçe tavanları da özsuyu ölçen damarlar.

Büyüme algoritması

tip = { x, y, açı, derinlik, genişlik, path[] }
her adım:
  açı += (hedefe dönüş) * kazanç + rastgele salınım
  fototropizm: imleç 340px içindeyse hedef = imlecin yönü
  yeni segment KALICI olarak çizilir (canvas silinmez)
  her 26 adımda: çocuk dal (açı ± ~0.5-1 rad, genişlik *0.72)
  bazı kavşaklarda provider çipi açılır (roundRect + mono metin)

Kalıcı canvas: her karede temizlemek yerine ağ birikir; "yerleşme" geçişi 120ms'de bir rgba(4,7,12,.045) ile eski izleri yumuşatır. Sonuç: koyulaşan yaşlı damarlar + parlak genç uçlar = doğal derinlik.
Resprout: ekrandan çıkan uç ölür ama %38 olasılıkla kayıtlı bir damarın rastgele noktasından yeni filiz doğar. Orman kendi kendini yeniler, asla boşalmaz.
Pulslar: kaydedilmiş dal path'leri üzerinde ilerleyen radyal parıltılar; "route edilen kartlar" hissi.
Bütçe tavanı: budget sahnesinde birkaç dal büyümeyi durdurur, ucu amber yanar ve "cap reached · $4.00" çipi açılır: özellik, animasyonun içinde.

İki ölümcül bug, iki ders

Ders 1: "ağ ölünce yeniden tohumla" kuralım alive < 4 eşiğiyle yazılmıştı; kök sayısı 3 olduğu için koşul HER karede doğruydu ve sahne 60fps'te sıfırlanıyordu. Ekran bomboştu, konsol tertemizdi. Ekran görüntüsü denetimi olmasa asla fark edilmezdi. Eşikler başlangıç durumuyla test edilmeli.

Ders 2: ilk düzeltmede fren tamamen kalktı ve ekran 9 saniyede opak mavi ormana döndü. Kalıcı-canvas sahnelerinde denge üç vidayla kurulur: uç sayısı tavanı, olasılıklı resprout ve seyrek yerleşme fade'i. Üçü birlikte "yaşayan ama doymayan" ekosistemi verir.

Marka sistemi

Biyolüminesans marka mavisinin kendisi: damarlar #7abeff, halo #3ba0ff, zemin #04070c. Yeşil orman klişesi yerine "derin deniz" mavisi.
Bricolage Grotesque 800 + Geist/Geist Mono; yüksek radius çipler ve butonlar; hover-invert doctrine satırları: kampanyanın ortak dili.
Pin sahnesi yine üç perde: route (pulslar hızlanır) → budget (amber tavanlar) → bloom (senkron büyüme patlaması).

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

Tur 1: boş ekran; sonsuz-reseed bug'ı bulundu (eşik hatası).
Tur 2: doygunluk; yoğunluk vidaları (MAXTIPS 46, halo inceltme, %38 resprout, 120ms settle) eklendi.
Tur 3: budget sahnesi amber çipleri, mobil bantlar, 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 ScrollTrigger, görsel varlıksız kalıcı-canvas büyüme simülasyonu. Denetim Playwright ekran görüntüleriyle; dağıtım Cloudflare Pages.

Sen de kur

# 1. Kalıcı canvas + seyrek settle fade = biriken ama doymayan doku
# 2. Fototropizm: hedef açıyı imlece çevir, kazançla yumuşat
# 3. Resprout: ölen uç, yaşayan damardan yeniden filizlensin
# 4. Ürün özelliğini büyüme kuralına çevir (bütçe = amber duran uç)
# 5. Eşikleri başlangıç durumuyla test et; screenshot denetimi şart
npx wrangler pages deploy ./site --project-name=my-grove