# YUI Flux — Marka Varlıkları Tüm dosyalar `landing/index.html` içindeki `#l-yui` işaretinden türetildi. İşaretin gövdesi **30 × 28** birimlik bir kutuya oturur; hücre 9 × 8, köşe yarıçapı 3, kolon boşluğu 1.5, satır boşluğu 2. Bütün türevler bu geometriyi ölçekler — SVG, PNG ve animasyon arasında kayma yoktur. İndirme sayfası: [`/logos`](../logos.html) --- ## Dosyalar ### İşaret (mark) Sadece kanban kolonları. Kare tuval, 32 × 32 viewBox, gövde ortalanmış. | Dosya | Ne zaman | |---|---| | `yui-mark.svg` | Varsayılan. İki renkli (indigo + mor). | | `yui-mark-gradient.svg` | Tek geçişli gradyan dolgu; büyük ölçekte. | | `yui-mark-white.svg` | Koyu zemin, tek renk beyaz. | | `yui-mark-ink.svg` | Açık zemin, tek renk koyu. | ### Kilit (lockup) — işaret + kelime işareti | Dosya | Oran | |---|---| | `yui-logo-horizontal.svg` | 81 × 36 — varsayılan, yatay yerleşim | | `yui-logo-horizontal-white.svg` | 81 × 36 — koyu zemin | | `yui-logo-vertical.svg` | 57 × 98 — dikey / kare alanlar | | `yui-logo-vertical-white.svg` | 57 × 98 — koyu zemin | | `yui-wordmark.svg` | 34 × 29 — işaret olmadan, yalnız metin | ### Uygulama karosu / favicon | Dosya | Ne zaman | |---|---| | `yui-icon.svg` | 512 × 512, gradyan karo + beyaz işaret. iOS/Android/macOS ikonu. | | `yui-icon-light.svg` | Beyaz karo + renkli işaret; koyu arayüzlerde ikon rozeti. | | `favicon.svg` | 32 × 32. Küçük boyda okunurluk için opaklıklar sertleştirildi. | ### Animasyon — 12 varyant **Giriş** animasyonları bir kez kurulur ve sahnenin en uzun bölümünde *gerçek logoda* dinlenir; marka kimliği her döngüde net bir kare olarak görünür. | Dosya | Süre | Davranış | |---|---|---| | `yui-mark-animated.svg` | 4.0 s | Kartlar sırayla yukarıdan yerine oturur, bekler, silinir. En sade giriş. | | `yui-mark-assemble.svg` | 4.4 s | Kartlar dönük, küçük ve dağınık gelip yaylanarak yerleşir. En hareketli. | | `yui-mark-draw.svg` | 5.0 s | Kartlar konturla çizilir, sonra içleri dolar ve kontur silinir. | | `yui-mark-flow.svg` | 5.0 s | Altı hücre üzerinden komşudan komşuya tam devir: `kol1/sat1 → kol1/sat2 → kol2/sat3 → kol2/sat2 → kol2/sat1 → kol3/sat1 → çıkış`. Hiçbir kart durmaz; boşalan sol üst yuvada yeni kart belirir. Ürünü anlatan animasyon. | | `yui-mark-flow-soft.svg` | 5.0 s | `yui-mark-flow`'un hayalet yer tutucusu yarı yarıya soluk sürümü. Siluet yine tam, boşalan yuva göze batmaz. | | `yui-logo-animated.svg` | 4.0 s | İşaret kurulur, kelime işareti sağdan açılır. | | `yui-logo-typewriter.svg` | 5.0 s | `YUI` harf harf düşer, `FLUX` harf aralığı 0'dan 2.73'e açılır. | **Sürekli** animasyonlarda boş kare yoktur; logo her an okunur. | Dosya | Süre | Davranış | |---|---|---| | `yui-mark-animated-wave.svg` | 2.6 s | Kartlar sırayla hafifçe kalkar. Kalıcı yerleşimlerde varsayılan. | | `yui-mark-loader.svg` | 2.0 s | Parlaklık pano çevresinde dolaşır — spinner yerine. | | `yui-mark-shimmer.svg` | 2.8 s | Çapraz ışık bandı üzerinden süpürür. Şekil ve renk sabit. | | `yui-mark-flip.svg` | 3.0 s | Kartlar sırayla kendi düşey ekseninde çevrilir. | | `yui-mark-pulse.svg` | 3.0 s | İşaret merkezinden %7.5 büyüyüp döner. En sakin olan. | `*.gif` karşılıkları da pakette (beyaz zemin, 14–20 fps). Şeffaflık gereken yerlerde GIF değil SVG kullanın. #### Uygulama notları Animasyonlar **SMIL** (``) kullanır: ``, CSS `background-image` ve README içinde çalışır — JS veya CSS enjeksiyonu gerekmez. Üretirken karşılaşılan ve kalıcı hâle gelen dört kural: 1. **Gecikme `begin` ile değil `keyTimes` ile verilir.** Her katman aynı `dur` değerini ve `repeatCount="indefinite"` kullanır; `begin` zincirleri `` ve CSS arka planı içinde güvenilir çalışmıyor, kartlar zamanla birbirinden kayıyordu. 2. **İlk katmanın gecikmesi asla 0 olmamalı.** `keyTimes` `"0;0;…"` diye başlarsa yinelenen anahtar zaman `calcMode="spline"` altında animasyonu bozuyor — her sekansta küçük bir `lead` var. 3. **Boşalan yuvada hayalet kalır.** `yui-mark-flow`'da bir kart sürüklenmeye başlayınca bıraktığı yuvada soluk bir yer tutucu belirir ve yeni kart oturana kadar durur - gerçek kanban arayüzlerindeki placeholder'ın aynısı. Logoyu ayakta tutan şey bu: kart yolculuktayken yuva boş kalmıyor, silueti hayalet tamamlıyor. Ölçüldü: kıpırtı boyunca örneklenen 24 karenin hiçbirinde altı yuvadan biri bile boş değil. Yer tutucunun koyuluğu `GHOST_STRONG` / `GHOST_SOFT` ile iki kademeli: `max(taban, kartın opaklığı x oran)` - koyu kartın hayaleti de koyu olur, ama en soluk kart bile taban sayesinde görünür kalır. Ayrıca her kart hedef yuvanın renk + opaklığını yol boyunca üstlenir; zincir bittiğinde tablo başladığı tablonun aynısı olur ve döngü sıfırlaması görünmez (kalan fark: 25.600 pikselin 24'ünde, yalnız kart köşelerinin kenar yumuşatmasında - taşınan şekil sabit şekilden bir alt-piksel farklı rasterleşiyor). 4. **Gradyan koordinatları canlandırılmaz.** Chromium `linearGradient` üzerindeki `x1/y1/x2/y2` SMIL animasyonunda `animVal`'ı güncelliyor ama boya sunucusunu yeniden değerlendirmiyor; ekranda hiçbir şey olmuyor. `yui-mark-shimmer` bu yüzden sabit gradyanlı bir bandı `transform` ile taşıyıp `clipPath` ile kartlara kırpıyor. Merkezden dönme/ölçekleme gereken yerlerde kart üç katmanlı kurulur: dış `` konumu taşır, iç `` merkezden döndürür/ölçekler, `rect` ise `-4.5,-4` köşesinden çizilir. ### Yükleme animasyonu (`loaders/`) Sonsuz döngülü yükleyiciler, **Lottie JSON** olarak. `lottie-web` / `lottie-react` / `lottie-react-native` doğrudan okur. ``` yui-loader-flow.json sürükle-bırak zinciri (yui-mark-flow-soft'un yükleyici hâli) yui-loader-chase.json klasik: parlaklık kartların arasında dolaşır yui-loader-chase-fast.json aynısı, iki kat hızlı yui-loader-wave.json kartlar sırayla kalkar yui-loader-bounce.json kolon kolon zıplama yui-loader-pop.json sırayla büyüme yui-loader-flip.json kendi ekseninde çevrilme yui-loader-breathe.json hepsi birlikte nefes alır (en sakin) yui-loader-chase-white.json koyu zemin için beyaz ``` Kendi ayarınızı üretmek için **[yükleyici stüdyosu](../loader.html)**: 8 hareket, ayarlanabilir süre / gecikme / darbe genişliği / şiddet / renk, canlı önizleme, tek tuşla Lottie JSON veya bağımlılıksız SVG indirme. Stüdyodaki önizleme de indirilecek JSON'dan oynatılır - ekranda görülen ile dosya birebir aynıdır. Üç kural bu üretecin içinde sabit: * **Döngü dikişsizdir.** Her özelliğin ilk ve son anahtar kare değeri aynıdır; ölçüldü, yedi hareketin tamamında dikiş farkı **0 piksel**. * **Döngü, en geç kartın darbesini kapsayacak kadar uzundur.** Kullanıcının seçtiği süre yetmiyorsa sessizce kısaltılmaz, döngü uzatılır ve arayüz efektif değeri gösterir. * **Sürükle-bırak (`flow`) koreografi tipidir.** Diğer yedi hareket "her kart aynı işi gecikmeli yapar" kalıbındadır; `flow` ise kartların farklı işler yaptığı, hayalet yer tutucu ve yeni kart gibi fazladan katmanları olan bir koreografidir (6 değil 10 katman). Üreteç bu yüzden iki tipi ortak bir "katman tarifi" listesine indirger. Zamanları eylem süresinin oranı olarak yazılıdır; hız değişince koreografi bozulmadan ölçeklenir. **Donuk kart yok.** Yol altı hücreyi komşudan komşuya dolaştığı için her hücre devirde tam bir kez yer değiştirir. Ara bir denemede `kol2/sat1` ve `kol2/sat2` sabit bırakılıp onlara mikro bir ölçek/opaklık titremesi verilmişti; tasarım gibi değil arıza gibi okundu ve bırakıldı - kartlar gerçekten zincire alındı. **Hiçbir kart kanvas kenarında kırpılmaz.** İşaret kanvası 1-2 birim payla doldurduğu için bu kendiliğinden olmuyor; üç yerde ölçüp ayarlandı: tuval dışından giren kart (9 birimlik kart 1 birimlik paya sığmıyor - bırakıldı, yerine sol üstte yerinde belirme), sol üstteki kartın kaldırma + eğimi (%113 + 5 derece, döndürülmüş kutusu sol kenara sürtüyordu -> %106 + 3 derece) ve giden kartın sağa süzülmesi (2.5 birimde sağ kenar 32.87'ye çıkıyordu, kanvas 32 -> 1.0 birim). Tarama: her iki sürümde 24 karede kanvasın en dış piksel sırasına değen kart yok. Sürükleme yayı hem Lottie hem SVG çıktısında elle yazılmış `yui-mark-flow-soft.svg`'deki **kuadratik eğrinin birebir aynısıdır**: Lottie tarafında uzamsal Bézier teğetiyle (`to`/`ti`), SVG tarafında `animateMotion` + kuadratik yol ile. Yayı üç anahtar kareyle yaklaştırmak yetmiyor - Lottie konum anahtarları arasını düz interpolasyon yaptığı için yol ortada 31.8 derecelik bir köşe yapıyor ve hareket gözle görülür biçimde akıcılığını kaybediyor (ölçüldü; teğetli hâlde eğriden sapma 0.004 birim). Gecikme ve genişlik onda da geçerlidir, yalnız anlamları değişir: **gecikme** zincirin basamak arası, **genişlik** bir sürüklemenin süresi. Döngünün alt sınırı bu ikisinden türer, artan süre dinlenme olur. Hayaletin koyuluğu ayrıca ayarlanır; %0'da yuva gerçekten boş görünür. * **Yükleyicide kartların opaklık kademesi eşitlenir.** Markanın kademesiyle (0.34 ... 1.0) en soluk kart durağan hâlde görünmez oluyor ve işaretin şekli okunmuyor. Kademeyi geri açmak için stüdyodaki anahtar var. ```js import Lottie from 'lottie-react'; import loader from './yui-loader-chase.json'; ``` ### PNG (`png/`) Şeffaf zeminli, headless Chromium ile 1× render edilip Lanczos ile küçültüldü. ``` yui-mark-{128,256,512,1024}.png yui-mark-white-{256,512,1024}.png yui-icon-{64,128,256,512,1024}.png yui-icon-light-{256,512,1024}.png yui-logo-horizontal-{512,1024,2048}.png yui-logo-horizontal-white-{512,1024,2048}.png yui-logo-vertical-{512,1024}.png yui-logo-vertical-white-{512,1024}.png yui-wordmark-{512,1024}.png ``` --- ## Renkler | Rol | HEX | RGB | |---|---|---| | Indigo (brand) | `#4F46E5` | 79 70 229 | | Mor (purple) | `#A25DDC` | 162 93 220 | | Mürekkep (ink) | `#171A30` | 23 26 48 | | Soluk (faint) | `#8A8FA6` | 138 143 166 | | Gradyan | `linear-gradient(115deg, #4F46E5, #A25DDC)` | | İşaretteki opaklık kademeleri: `1.0 · 0.62 · 0.55 · 0.34`. Tek renk (mono) sürümlerde renk ayrımı olmadığı için taban yükseltilir: `1.0 · 0.78 · 0.72 · 0.5`. ## Yazı tipi Kelime işareti `Figtree` (800 / 700) ile kurulur, siteyle aynı yığın: ``` Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ``` **Önemli:** Kelime işareti içeren SVG'ler canlı `` kullanır — Figtree kurulu olmayan makinede yığındaki bir sonraki yazı tipine düşer. Harf formunun sabit kalması gereken yerlerde (basılı iş, üçüncü taraf, video) `png/` altındaki hazır çıktıları kullanın. Sadece işaret (`yui-mark*`, `yui-icon*`, `favicon`) tamamen geometridir — yazı tipinden etkilenmez. ## Kullanım **Yapın** - İşaretin çevresinde en az bir hücre yüksekliği (gövdenin ~%29'u) boşluk bırakın. - Yatay kilidi 88 px genişliğin altına düşürmeyin; altında yalnız işareti kullanın. - Koyu zeminde `-white` sürümlerine geçin; renkli sürümü zorlamayın. **Yapmayın** - Oranı bozmak, döndürmek, eğmek. - Hücrelerin rengini, opaklığını veya aralığını değiştirmek. - Kelime işaretini işaretten ayırıp kendiniz yeniden dizmek — `yui-wordmark.svg` var. - Kalabalık fotoğraf üzerine doğrudan yerleştirmek; önce düz bir yüzey koyun. --- ## Yeniden üretim Varlıklar elle düzenlenmez, üretilir. Geometri veya renk değişirse `landing/index.html` içindeki `#l-yui` sembolü ile `_tools/gen_logos.py`'yi birlikte güncelleyin, sonra: ```sh _tools/build.sh # SVG -> denetim -> PNG -> GIF -> ZIP ``` `_tools/check.py` her `` düğümünü SMIL kurallarına göre doğrular: `keyTimes`/`values`/`keySplines` sayıları, artan ve 0-1 aralığında anahtar zamanlar, `repeatCount`. Bozuk bir animasyon SVG'yi geçersiz XML yapmadığı ve tarayıcı hata bildirmediği için sessizce hiç çalışmıyor - bu denetim üretim sırasında tam olarak bu tipte iki hatayı yakaladı.