2f01d06592
All checks were successful
Deploy / deploy (push) Successful in 7m12s
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
128 lines
16 KiB
Markdown
128 lines
16 KiB
Markdown
# 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).
|