🔊
Ses
›
Kod-tabanlı iOS design kit — token kopyala, paket seç, komponenti yapıştır. Yapı: tokens.css (token) + components.css (komponent) + kk-juice/haptic.js + starter/. Değerler derin araştırmayla doğrulandı (Apple HIG / iOS 26).
Yeni proje 30 saniyede: starter/ klasörünü kopyala, kit dosyalarını yanına al, data-pack seç. Safe-area + yüzen tab bar + sheet + toast + ses/haptic/juice bağları hazır. Canlı gör →
iOS 26'nın materyali. Kural: glass sadece navigasyon/kontrol katmanı — içerik katmanında asla. regular (buzlu) metin taşıyan her şeyde, clear sadece zengin görsel üstünde. Yüzen tab bar kenarlardan 21px içeride.
--glass-bg (regular) | --glass-bg-clear | --glass-blur:20px + saturate(160%) | --glass-edge + --glass-shadow | inset: var(--inset-float)=21px
Aktif paketin ana renkleri. Paketler tokens.css içinde data-pack ile tanımlı; 🌙/☀️ karşı-modu açar. Tüm varyantlar WCAG testinden geçti (node check-contrast.mjs).
<button class="btn btn-primary"> | btn-secondary | btn-tonal | btn-outline | btn-ghost | btn-glass | btn-destructive | disabled
HIG kuralları: dokunma hedefi min 44×44px · her butonda basılma durumu şart · sayfa başına en fazla 1-2 vurgulu (primary) buton · tercih edilen aksiyonu boyutla değil stille ayır · kapsül iOS 26 varsayılan şekli. Boyut rampası: 28 / 32 / 44 / 52 / 64.
btn-sm | btn-lg | btn-pill | btn-icon | btn-fab | btn-block
<div class="seg">…</div> | <button class="toggle on">
Temel, elevated, glass, hero — aynı iskelet, farklı yüzey.
Stroke + hafif gölge. Liste içi standart.
Çerçevesiz, derin gölge. Öne çıkan içerik.
Blur yüzey — görselin/oyunun üstüne biner.
Gradient zemin. Kampanya, etkinlik duyurusu.
Stat kartları
Liste hücreleri (iOS settings tarzı)
Progress kartı
12/20 level tamamlandı
Paywall kartı
Kamera shake YOK — his partikül + pulse ile. kk-juice.js: tek canvas overlay, dört reçete. reduced-motion'da partiküller otomatik kapanır. Butonlara bas:
kkJuice.confetti(x,y) | .coinsTo(fromEl,toEl,n,cb) | .damage(x,y,"+120") | .pulse(el)
Ses token'larının dokunsal kardeşi — aynı isimler: tap/success/error/heavy. Web'de Vibration API (Android çalışır, iOS Safari desteklemez → sessiz no-op), Capacitor'a geçince otomatik native Taptic Engine. Masaüstünde titreşim yok — telefonda dene.
kkHaptic('tap') — kk-haptic.js; Capacitor varsa native, yoksa navigator.vibrate
Bottom sheet: --ease-sheet eğrisi + --r-modal üst köşeler + grabber + safe-area alt boşluk. Toast: glass pill, yay eğrisiyle üstten düşer.
Yıldızlar sırayla yay eğrisiyle pop'lar (120ms arayla). Tek vurgulu buton kuralına uygun: primary "Sonraki", secondary "Tekrar".
Üç durum: tamamlandı (yıldızlar), aktif (gradient + nabız), kilitli. 56px hücre > 44px dokunma minimumu.
Glass pill sayaçlar (üst), cooldown'lu skill butonu (conic-gradient süpürme — tıkla), combo göstergesi (gradient text). Hepsi oyun sahnesinin üstüne biner — glass'ın doğru kullanım yeri.
24 temel ikon — tek stroke kalınlığı (2px), yuvarlak uçlar, 24×24 grid. Tıkla = kodu kopyala. Emoji yerine bunlar; premium hissin ikon ayağı.
<svg class="ic"><use href="#i-home"/></svg> — renk currentColor'dan gelir
5 standart SFX — saf Web Audio, dosya yok. "Bu etkileşim = bu ses" eşleşmesi de bir tasarım kararı. Butonlara bas, dinle.
sfx('tap') — kk-sfx fonksiyonunu kopyala, her projede aynı ses dili
Telefon çerçevesinde komple ekran: silik X (standart kalıp), hero, ✓ özellik listesi, seçilebilir plan kartları (yıllık öne çıkar), tam genişlik CTA, restore linki.
Kaydırmalı 3 tanıtım + bildirim izni sayfası (scroll-snap). Noktalar kaydırmayla güncellenir, aktif nokta hap şekline uzar. Telefonda parmakla, masaüstünde yatay scroll'la dene.
Text field (44px, focus halkası accent'ten), hata durumu ve iOS arama çubuğu. Focus'a tıklayıp bak.
<input class="input"> | .err-state | .search — focus halkası: 0 0 0 3px accent %22
Boş durum: kesik çizgili çerçeve + tek CTA. Skeleton: shimmer süpürmesi (reduced-motion'da durur) — içerik yüklenirken layout zıplamasın.
İlk oyununu oyna, skorların burada biriksin.
Bildirim noktası, sayı rozeti, seviye/XP/yeni çipleri — hepsi paket renklerinden türer.
.reldot + .dot | .count | .chip-lvl / .chip-xp / .chip-new
Premium hissin yarısı timing. Süreler: instant 100 / fast 150 / med 250 / slow 400ms. Eğriler: --ease-out (iOS hissi), --ease-spring (taşmalı yay — ödüller), --ease-sheet (sheet açılışı). Hazır sınıflar: .kk-pop, .kk-slide-up.
transition: transform var(--dur-med) var(--ease-spring);
Apple Dynamic Type ramp (Large, doğrulanmış) — boyut/satır yüksekliği. 17 = iOS varsayılan metin, 11 = minimum.
Display font — gömülü Unbounded (woff2, Türkçe destekli). Sadece marka/başlık/skor gibi kimlik noktalarında; gövde metni sistem fontunda kalır.
font-family: var(--font-display) — fonts.css + fonts/ klasörünü birlikte kopyala