kolaytercih/docs/arastirma/2026-09-24-ui8-forge/00-RAPOR.md

ui8 Forge ve liquid.ui8.dev — ne yapıyorlar, bize ne katar (24 Eylül 2026)

Tek cümle: Forge, ücretsiz bir Mac uygulaması; bizim projeyi bütün sayfalarıyla tek bir tuvale seriyor ve tıkladığın öğe için zaten kurulu olan Claude Code'u çalıştırıyor. Para, uygulamadan değil, "Forge Cloud" üzerinden site yayınlamaktan kazanılıyor; bu kısım bize gerekmiyor. Akıcılık hissini veren şey cam görünümü değil, fizik tabanlı yay hareketi + hızla uzayan/basınca küçülen tepki + GPU'da çizim; bunları kendi piksel dilimizde kullanabiliriz.

Kaynaklar: ui8.ai/forge (sayfa + changelog, 114 sürüm notu), liquid.ui8.dev (JS paketleri indirilip okundu), bu Mac'te kurulu Forge.app v0.38.1 (paket içi backend/server.mjs, şablon AGENTS.md), forge.ui8.ai panelinin JS'i. Fiyat rakamları herkese açık yerde yok; aşağıda neden.

---

1. Forge nedir

Soru	Cevap
Ne	macOS uygulaması (Electron). Yerel Vite/Next projesini açıyor; her sayfa (route) sonsuz tuvalde canlı bir çerçeve. Tuval altyapısı @xyflow/react.
Ajan	Kendi kurduğun Claude Code / Codex / OpenCode / Cursor'u çağırıyor. Bağlantı Agent Client Protocol (ACP) ile: paket içinde @agentclientprotocol/claude-agent-acp var. "Claude bağlantısını yaptım" dediğin şey bu: Forge, Mac'teki claude komutunu bir köprüyle konuşturuyor, kendi modeli yok.
Ajana ne veriyor	Oturuma kendi forge MCP sunucusunu ekliyor. Araçlar: get_forge_docs (konular: components, story-docs, site-meta, publishing, setup-project, fragments), dev sunucusu başlat/durdur/log oku, publish_site, dağıtım listesi/geri al, alan adı ekle/doğrula, organizasyon üyeleri, get_billing.
Düzenleme kipleri	E (Styles): CSS'i tuvalde canlı düzenle. P (Parametric): bileşen prop'ları slider/sürüklenebilir sayı olur, değer kaynak koda geri yazılır. Yay/easing eğri editörü var. Kırılma noktası (SM/MD/LG) varyantı üretiyor.
Bağlam	Ekran görüntüsüne numaralı pin koyup sohbete ekliyorsun; tıkla-incele ile öğenin kaynak dosyası çözülüyor; sesli girdi; kuyruk mesaj; izin kipleri (Plan / Accept edits / Bypass).
Bileşenler	Storybook hikâyelerinden ya da kendi .stories.json sözleşmesinden çerçeve üretiyor.
Yayın	Launch → Forge Cloud'a statik yayın (ön izleme adresi, prod'a terfi, geri alma, özel alan adı).
Altyapı	Kendi pnpm'ini taşıyor, "vite-sidecar" ile dev sunucusunu kendisi yönetiyor, Next için next-shims klasörü var (22 Tem 2026'dan beri "framework agnostic"). Yeni proje şablonu: TanStack Start + Vite + Tailwind 4 + motion + three + zustand.
Zaman çizgisi	8 Haz 2026 ilk not → 13 Haz açık beta (bekleme listesi) → 11 Ağu bekleme listesi kalktı, herkese ücretsiz → 17 Ağu v0.31 (prompt ile başlayan Home). Kurulu sürüm 0.38.1.

Bu Mac'te durum: Forge.app kurulu, ama ~/Library/Application Support altında Forge'a ait veri dizini yok; yani proje henüz Forge'da açılmamış görünüyor (ya da veri başka yerde). ~/.claude.json içinde forge kaydı yok; bu normal, MCP'yi Forge kendi oturumuna içeriden ekliyor.

2. Ücretlendirme — neden, neye

• Uygulama ücretsiz. Sayfa "free macOS app" diyor; changelog "no invite, no waitlist".
• Para Forge Cloud'dan. Panel kodundaki fatura şeması organizasyon başına: plan {ad, fiyat, para birimi, aralık (aylık/yıllık), dahil koltuk}, limitler {site sayısı, depolama, özel alan adı, fragment}, kullanım {site, depolama, bant genişliği, alan adı}, Stripe müşterisi. Limit aşımında quota_exceeded (hangi boyut, limit, kullanım).
• Rakamlar: Fiyatlar giriş yaptıktan sonra API'den çekiliyor; ne landing'de ne panel JS'inde yazılı. Görmek için: forge.ui8.ai → /billing/plans (giriş gerekli). Web'de de yayımlanmış bir fiyat tablosu bulamadım.
• Model: Vercel/Framer mantığı. Araç ücretsiz ve yerel (repo senin), gelir barındırma + ekip koltuğu + alan adından. Her yayınlanan sitedeki "Built with Forge" çipi ve *.ui8.dev demoları (liquid, fine, soft, skate) büyüme kanalı. ui8'in asıl işi zaten tasarım pazarı (ui8.net); Forge o kitleye "tasarımcı kod yazmadan gerçek repo'da çalışsın" diyor.

3. Web'de neyi başardılar — akıcılığın tarifi

3.1 Forge açılış sayfası (ui8.ai/forge)

• Arka plan: elle yazılmış WebGL2 shader, tek tam-ekran üçgen (gl_VertexID hilesi, vertex buffer yok), 218 uniform, bol smoothstep. Köşede "WEBGL2 — 240FPS" rozeti. 45 px nokta ızgarası (bizim 10 px piksel ızgaramızın koyu tema akrabası).
• Kaydırmaya bağlı sahne: uygulama ekran görüntüsü kendi içine "inception" zoom yapıyor (kendi demo sohbetlerine göre 0,9 s ease-out, 1400 px döngü).
• Hareket: motion yayları stiffness 650–700, mass 0.7; süreler 480 / 700 / 950 ms; tetik IntersectionObserver; prefers-reduced-motion gözetiliyor; will-change + translate3d.
• Yazı: SF Pro + Geist Mono, tabular-nums. Koyu zemin, tek turuncu vurgu (bizim orange-500'e çok yakın).

3.2 liquid.ui8.dev (cam slider)

Sayfa tek bir slider gösteriyor; Space ile Bubble / Lens / Orb / Segmented / Toggle / Wheel demoları dönüyor (her biri ayrı JS parçası). Nasıl yapılmış:

1. Çizim GPU'da. three.js WebGPURenderer (WebGL'e düşer) + TSL düğüm malzemeleri, OrthographicCamera + tek PlaneGeometry. Slider'ın rayı ve yazısı önce normal 2D canvas'a çiziliyor (fillRect, fillText, gradyan) → CanvasTexture → shader bu dokuyu başparmağın altında kırıp büyütüyor.
2. Mercek parametreleri (varsayılanlar): lensSize 110, restRefraction 20, restMagnification 0.22, bevelWidth 46, rimWidth 1.1, rimIntensity 0.55, fresnelPower 6, frostBlur 2, sheenStrength 0.3, topReflection 0.25, shadowSoftness 26, shadowOpacity 0.14, edgeDistortion 1.6, normalStrength 42, gooeyness 70, motionStretch 2.5, motionSmoothing 12. Bunlar Forge'un Parametric kipinde slider olarak ayarlanıp yazılmış değerler.
3. Hareket fiziği (motion/react): imleci takip stiffness 500–550, damping 25; bırakınca bounce 0.3, visualDuration 0.3. Basınca küçülüyor (pressVel, shrinkGoal), hızlandıkça hareket yönünde uzuyor (motionStretch), durunca toparlıyor. Akıcı hissin asıl kaynağı bu üçlü: yay, hız-duyarlı deformasyon, anlık basma tepkisi.
4. Erişilebilirlik korunmuş. Altta gizli gerçek <input type="range"> (klavye ve okuyucu çalışıyor), aria-live etiket, prefers-reduced-motion'da geçişler kapalı.
5. Yığın: TanStack Start + Vite + Tailwind; sayfa Forge ile yapılıp Forge Cloud'da yayınlanmış.

Bedeli: three.js paketi tek slider için ~600 KB JS; koyu zemin ve cam görünüm. Bunlar bizim kurallara ters (DESIGN.md §1.2 karanlık mod yok; §7 "camsı backdrop-blur kart" AI izi sayılıyor; §6 hareket yalnızca bir şey söylüyorsa var).

4. Bize ne katar

4.1 Forge'u araç olarak kullanmak (maliyet 0, en hızlı kazanç)

İş	Neden	Not
Projeyi Forge'da aç, tüm sayfaları 375 / 768 / 1024'te yan yana gör	DESIGN.md §9.2 "ölç, tahmin etme" ve §8 kırılma noktaları için görsel denetim yüzeyi. Tasarımcı istisnasına (AGENTS.md "tarayıcı açma") uyuyor.	Ajan yine Claude Code; düzenlemeler repo'ya normal dosya değişikliği olarak düşer, git kurallarımız aynen geçerli.
Tıkla-incele + pin'li ekran görüntüsü ile Claude'a iş ver	"Şu kartın sağ boşluğu" tarifi yerine pin.	Forge'un setup-project talimatı ajanı "projenin kodunu yeniden yazma" diye uyarıyor; iyi.
Parametric kip: usePixelHeat sabitleri (ısınma 0,15 s, soğuma 1,4 s, yarıçap, sıcak opaklık), Parallax güçleri (16 / 7 / 26), varsayılan yay (duration 0.35, bounce 0) slider olsun	Bu sayıları bugün koddan tahminle değiştiriyoruz; canlı ayarlayıp geri yazdırmak DESIGN.md'deki "yaklaşık aynısı yazma" kuralına da hizmet eder.	Her bileşen için küçük bir .stories.json gerekir (get_forge_docs story-docs). Önce 5 çekirdek bileşen: SectionEyebrow, Button, OzetKart, PixelSira, SehirCipleri.

Riskler: Next 16 desteği iki aylık; projede better-sqlite3 + .env + data/app.db var, Forge'un yönettiği dev sunucusu bunlarla açılıyor mu ilk denemede görülür. Forge Cloud yayınını kullanmayacağız: yayın statik (verify-static-build, SPA fallback), bizim sitemiz sunucu tarafı; canlı zaten Gitea → VPS. Dolayısıyla ücretli kısım bize hiç gerekmiyor.

4.2 Tekniği almak, görünümü almamak

Fikir	Bizde nerede	Kural uyumu
Basınca yaylı tepki: active:scale-[0.97] var, bırakınca yay ile toparlama yok	Buton, haplar, CTA (whileTap + spring bounce 0)	§6 ile uyumlu, sekmesiz. Küçük iş.
Dilim sekmesi göstergesinin hareket ederken hafif uzaması (Segmented demosu)	program-tablosu.tsx layoutId="dilim-aktif-hap" zaten yay ile kayıyor	Süs sınırında; §6 "hareket bir şey söylüyorsa". İsteğe bağlı, önce ölç.
Piksel ısısını GPU'ya taşımak (tek canvas / WebGL katmanı)	TurkeyPixelMap + landing'de 16 usePixelHeat örneği; bugün her rect ayrı SVG animasyonu	Yalnızca Rybbit web-vitals (INP) ucuz Android'de takılma gösterirse. SVG sunucu tarafı/JS'siz yedek olarak kalır. Şimdi değil.
Mercekli slider → sıralama girişi	Sihirbazda sıralama metin kutusu (sihirbaz-adimlar.tsx)	Başparmağın çevresindeki taban sıralamaları büyütmek gerçek bilgi katar; ama cam değil piksel cetvel diliyle. Ürün kararı, backlog'a.
Özel kontrolün altında gerçek <input>	ui/slider.tsx var, kullanılmıyor	Özel slider yaparsak bu deseni al.

4.3 Almayacaklarımız

Koyu tema, cam/blur yüzeyler, 3D küre, three.js bağımlılığı (öğrenci mobil veride), açılışta shader arka plan (LCP'ye yük), "240FPS" pazarlaması.

5. Sıra

1. Bu hafta 1 saat: Forge'da projeyi aç, dev sunucusu kalkıyor mu, üç genişlikte sayfalar geliyor mu. Sonuç KARARLAR.md'ye.
2. Kalkıyorsa 5 çekirdek bileşene .stories.json; Parametric ile usePixelHeat ve Parallax sabitlerini ayarla.
3. Basınca yaylı tepki desenini Button'a ekle (tek kaynak), DESIGN.md §6'ya yaz.
4. Piksel ısısı için önce Rybbit INP verisine bak; veri yoksa dokunma.

---

6. X'te (Twitter) ne denmiş — ek, 24 Eylül akşamı

Yöntem: X sayfaları bizim tarayıcıdan açılmıyor (site engelli); gönderiler X'in herkese açık gömme servisinden çekildi. Yanıtlar (reply) o servisten gelmiyor; aşağıdaki sayılar beğeni/yanıt sayısıdır, yanıt metinleri okunamadı.

Kim konuşuyor: Neredeyse yalnızca yapımcılar. Forge'u Dash (@creativedash) tasarlayıp yapıyor, Joel (@joelbqz) ile birlikte; ui8 hesabı bunları paylaşıyor. Dış dünyadan bulabildiğim tek bağımsız yorum ve tek video aşağıda. Reddit, Hacker News, Bluesky'da tartışma yok; Türkçe hiç konuşulmamış.

Tarih	Kim	Ne dedi	Etki
13 Haz 2026	@creativedash	"Her gün kullandığım yeni bir tasarım aracı yaptım, @joelbqz ile. Forge. Ücretsiz, çok hızlı, macOS'a geliyor."	151 beğeni, 15 yanıt
17 Tem	@creativedash	"Bunu Forge'da yaptım, tamamen benim için otomatik yazdığı slider'larla" → warp.ui8.dev	(ui8 alıntıladı)
30 Tem	@creativedash	"Forge Cloud panelinde küçük ayrıntıları terletiyorum"	(ui8 alıntıladı)
7 Ağu	@ui8	"Böyle şeyleri saçma hızda yapmak ister misin? Tasarımcılar süper güç kazanıyor; token ya da API ile uğraşmak yok."	15 beğeni
11 Ağu	@ui8	"Aylarca yapıp test ettik; Forge herkese açık beta, sevdiğin bütün ajanlarla ücretsiz."	50 beğeni, 6 yanıt
11 Ağu	@creativedash	"Beklediğimden iyi çıktı" (video)	884 beğeni, 49 yanıt
13 Ağu	@creativedash	"Forge'un derdi şu: onunla böyle mantıksız şeyler de yapabiliyorum" → skate.ui8.dev (three.js/R3F, elle yazılmış GLSL su simülasyonu + fizik, motor yok, gamepad çalışıyor)	524 beğeni, 37 yanıt
17 Ağu	@creativedash	"Bileşenleri birden çok temada aynı anda test ediyorum, Forge'da"	75 beğeni
18 Ağu	@roberthaverly (bağımsız)	"İnsanlar sürekli işe yaramaz 'AI tasarım' ürünü çıkarıyor, sıkıcı ve jenerik oldu. Bununla biraz oynayınca anladım ki bu kesinlikle o kategoride değil."	5 beğeni; ui8 alıntıladı
19 Ağu	@creativedash	"Portföyün nasıl gidiyor? Benimki fine" → fine.ui8.dev; yığın: Forge + three.js + TSL shader	225 beğeni
21 Ağu	@creativedash	"holo.ui8.dev, Forge ile yapıldı" (hologram göstergeler)	2.585 beğeni, 39 yanıt — en çok ses getiren
23 Ağu	@creativedash	"hud.ui8.dev, Forge ile" (Visor)	300 beğeni
25 Ağu	@creativedash	"Tetris'te iyi misin? Fark etmez. Forge + Grok 4.6" → holo.ui8.dev/?view=tetris	494 beğeni
26 Ağu	@creativedash	"Lazerle 240 bin parçacığı 120 fps'de yontmak" → holo.ui8.dev/?view=fluid	197 beğeni
8 Eyl	@creativedash	"Bisiklet artık kendi kendine sürmüyor + yeni SF haritası tamamen üretildi, dış varlık yok; belki oyun yapma vakti" → cycle.ui8.dev	12 beğeni
11 Ağu	Lukas Margerie (YouTube Shorts)	"Bu eklenti Codex ve Claude Code'a sonsuz tuval veriyor" — tek bağımsız video	—

Dikkat: @swyx'in Ağustos'taki "Forge" gönderileri (forge.smol.ai, "SmolForge") başka bir ürün; ui8 Forge ile ilgisi yok, karıştırılmasın.

Okuma: Konuşma hacmi küçük ama teknik izleyicisi belli. Ses getiren gönderiler ürün tanıtımı değil, Forge ile yapılmış gösterişli 3D demolar (holo 2.585, "beklediğimden iyi" 884, skate 524). Dash'in mesajı hep aynı: "kod yazmıyorum, tuvalde ajanla konuşup slider'larla ayarlıyorum, sonuç gerçek repo'da". ui8'in satış dili "tasarımcıya süper güç, token/API derdi yok". Pazarlama tamamen Dash'in kişisel hesabından yürüyor; şirket hesabı alıntılıyor.

7. Forge ile yapılmış örnek işler (hepsi *.ui8.dev, Forge Cloud'da yayında)

Adres	Ne	Teknik not
liquid.ui8.dev	Cam slider; Space ile Bubble / Lens / Orb / Segmented / Toggle / Wheel	three.js WebGPU + TSL, motion yayları (§3.2)
holo.ui8.dev	Hologram göstergeler; ?view=tetris (Grok 4.6 ile yazılmış Tetris), ?view=fluid (240 bin parçacık, lazer yontma)	JS parçaları: SceneHints, CaptureLayer, HudOverlay. Bir After Effects eklentisi bu siteyi taklit etmek için yazılmış (GitHub: HoloGen)
skate.ui8.dev	Kaykay oyunu, gamepad destekli	three.js/R3F, elle GLSL su simülasyonu + fizik, oyun motoru yok
warp.ui8.dev	Tünel sahnesi, WASD ile yön, kaydırarak dalış, iki film müziği	"tamamen otomatik yazılmış slider'larla" ayarlanmış (Parametric kipin ilk vitrini)
sticky.ui8.dev	Çıkartma (sticker) stüdyosu; görsel ve 60 fps video dışa aktarma, kendi/video çıkartmaların	three.js; "10 kat hızlandı"
fine.ui8.dev	Dash'in portföyü (galeri)	three.js + TSL shader
soft.ui8.dev	Galeri demo	—
hud.ui8.dev	"Visor" arayüz katmanı	—
components.ui8.dev	Bileşen paneli: Agents / Global / Network / Inbox sekmeleri	"son zamanlarda her şeyi böyle yapıyorum" dediği iş akışı
cycle.ui8.dev	Bisiklet sürüşü, tamamen üretilmiş San Francisco haritası	oyun yönünde ilerliyor
005.ui8.dev (+ /v2)	"The Forge Manifesto", açık/koyu tema, "scroll to dive"	—

Ortak payda: hepsi koyu zemin, üç boyutlu, shader ağırlıklı, tek sayfalık vitrin işleri. Form, tablo, çok sayfalı içerik sitesi gibi bizim işimize benzeyen bir örnek yok. Yani "akıcılık" kanıtı görsel oyuncaklarda; katalog/sihirbaz türü bir üründe Forge'un işe yarayıp yaramadığını kendimiz deneyip görmemiz gerekiyor (§5, 1. madde).