"Studio" nasıl yapıldı?

Bu sayfa bir hibrit: SWARM sayfasının parçacık draması ile SEALED sayfasının ürün-bağlamlı sahne anlatısının kesişimi. Açılışta parçacıklar markanın logosunu kendi renkleriyle kuruyor; scroll'da bir kartın gemiye binişini dört glifle izliyorsun: kart → worktree dalı → kuyruk → fast-forward.

Neden hibrit?

İterasyon sürecinde iki uç netleşti: saf simülasyon sayfası (SWARM) duygusal olarak en güçlüsüydü; ürün-dilli sayfa (PHOSPHOR'un alt bölümleri) ise fazla "kurumsal" kaldı. Kullanıcı geri bildirimi ikisinin arasını işaret etti: SWARM'ın iskeleti + ürünün gerçek hikâyesi ve komponent yumuşaklığı. Bu sayfa o formülün ilk tam uygulaması; muhtemel resmi landing adayı.

İmza teknik: renkli logo örnekleme

Önceki sayfalarda parçacık hedefleri yalnızca alpha kanalından geliyordu (şekil siyah-beyazdı). Burada örnekleyici RGB de okuyor: logo SVG'si görünmez canvas'a çizilir, dolu piksellerin hem konumu hem rengi hedefe yazılır. Böylece 4.200 parçacık origami kuşlu F'yi markanın kendi mavileriyle (#037BFC, #0050C8) ve beyaz yüzeyleriyle kurar:

ox.drawImage(logoSvg, ...);            // vektör logo -> piksel
const d = ox.getImageData(...).data;
if (d[k+3] > 128)                      // dolu piksel:
  targets.push(x, y, d[k], d[k+1], d[k+2]);  // konum + RENK
// koyu zeminde okunması için marka mavileri bir ton parlatılır

Basılı tutunca sürü boids moduna dağılır; bırakınca logo yeniden toplanır. Finalde aynı motor FINDIE kelimesini yazar: marka ile açılır, marka ile kapanır.

Dört glifli hikâye sahnesi

Pin'li sahne (GSAP scrub, 3.2 ekran) ürünün yaşam döngüsünü glife çevirir; hepsi canvas path'i olarak çizilip aynı örnekleyiciden geçer:

01 describe: yuvarlak köşeli Kanban kartı: başlık çubuğu, metin satırları, buton, model noktası.
02 build: ana hattan ayrılan worktree dalı, commit noktalarıyla.
03 queue: üç şerit tek hatta birleşir, ok ile devam eder: seri kuyruk.
04 land: çift uçlu fast-forward oku: main yalnızca ileri sarar.

İlk çizimde kuyruk glifi "lades kemiği" gibi okunuyordu; ekran görüntüsü denetimi yakaladı, şeritler simetrik bağlandı ve bekleyen iş noktaları eklendi. Ders: glifler de copy'dir; okunmuyorsa yeniden yaz.

Ürün gerçeği: iki ekran kompozisyonu

"One studio. Every screen you own." bölümünde gerçek board ekran görüntüsü masaüstü çerçevesinde, köşesinde 3° eğik bir telefonda aynı board'un sol kesiti (object-position kırpması). Çerçeveler saf CSS: 26px/38px radius, yarı saydam kabuk, mavi glow gölgeler. Div'lerle sahte arayüz çizmek yok; ürün neyse o.

Tasarım sistemi (SWARM ailesi, yumuşatılmış)

Bricolage Grotesque 800 display + Geist / Geist Mono (ürünün fontları), sentence-case başlıklar.
Findie mavisi: butonlar #037BFC, vurgular #3ba0ff; butonlar 16-22px radius, çipler pill.
Boot sayacı, custom cursor, marquee, hover-invert doctrine satırları, creed kolonları: aile imzaları.
Mobilde sahne merkezi üst banda alınır (cy()): parçacık sahnesi başlıkla asla çakışmaz. Bu da iki mobil ekran görüntüsü turuyla kalibre edildi.

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

Tur 1: logo morph ve kart glifi ilk seferde oturdu; kuyruk glifi okunaksızdı, yeniden çizildi.
Tur 2: mobilde logo başlığın üstüne biniyordu; sahne merkezi ve boyutu iki adımda üst banda kalibre edildi.
Tur 3: statik tam sayfa, final morph, konsol taraması ve canlı deploy doğrulaması.

Kim yaptı? Bu sayfa Claude (Fable 5) tarafından Claude Code içinde otonom tasarlandı ve kodlandı: saf HTML/CSS/JS + GSAP, framework yok, build yok. Görsel denetim Playwright ekran görüntüleriyle; dağıtım Cloudflare Pages. Higgsfield/GPT görsel üretimi kullanılmadı; her piksel kod.

Sen de kur

# 1. Örnekleyiciye RENK ekle: konum + RGB birlikte hedefe yaz
# 2. Marka logosunu (SVG) parçacıklarla kur; hold=boids, release=re-form
# 3. Ürün yaşam döngüsünü 3-4 glife indir; pin+scrub ile anlat
# 4. Gerçek ekran görüntüsü + CSS cihaz çerçeveleri; sahte UI çizme
# 5. Mobilde sahne merkezini üst banda al; başlıkla çakışma yasak
npx wrangler pages deploy ./site --project-name=my-studio