STİL SÖZLÜĞÜ · VIBE'IN ADINI KOY

"Şöyle camsı, havalı bir şey" değil: glassmorphism.

UI Sözlüğü parçanın adını verir; burası havanın adını verir. Aşağıda aynı "Kayıt ol" kartı 12 ayrı stille CANLI çizildi — görseller değil, kodun kendisi. Vibe'ını bul, tanıma sinyallerini oku, brief'i kopyala, ajanına ver. Altta da hareketin sözlüğü: 8 animasyon kalıbı.

STİLLER — AYNI KART, 12 AYRI KİMLİK (karta tıkla → detay)

Kayıt ol

30 saniyede hesabını aç

giriş yap

Minimalizmminimalismzamansız ilke

"sade, bol boşluklu, az şeyli" diyorsan → adı minimalism

Sinyaller: bol beyaz boşluk · 1-2 renk + siyah metin · ince ayırıcı çizgiler

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Düz Tasarımflat designendüstri standardı

"gölgesiz, dümdüz renkli bloklar" diyorsan → adı flat design

Sinyaller: gölge/degrade yok · doygun düz renkler · basit geometrik ikonlar

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Cam Efektiglassmorphismendüstri trendi

"buzlu cam gibi, arkası hafif görünen paneller" diyorsan → adı glassmorphism

Sinyaller: yarı saydam buzlu panel (blur) · arkada RENKLİ ŞEKİLLER (blur'un okunması için şart) · 1px yarı-beyaz kenarlık

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Yumuşak Kabartmaneumorphismendüstri trendi

"zeminden hamur gibi kabarmış/gömülmüş düğmeler" diyorsan → adı neumorphism

Sinyaller: panel ile zemin AYNI renk · çift gölge: koyu + açık · kabarık (dışa) ve gömük (içe) hâller

Detay + tam brief →

YENİ ✦

Kayıt ol

30 saniyede hesabını aç

giriş yap

Neo-Brütalizmneubrutalismendüstri trendi

"kalın siyah çerçeveli, sert gölgeli, çiğ renkli" diyorsan → adı neubrutalism

Sinyaller: 3px siyah kenarlıklar · sert ofset gölge (4px 4px 0 #000) · çiğ doygun renkler (sarı/pembe/mavi)

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Web Brütalizmiweb brutalismkarşı-akım

"süssüz, ham HTML gibi, eski usul" diyorsan → adı web brutalism

Sinyaller: varsayılan/serif font · altı çizili düz mavi linkler · sıfır gölge, sıfır köşe yumuşatma

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Kil Efekticlaymorphismendüstri trendi

"oyun hamurundan yapılmış gibi tombul kartlar" diyorsan → adı claymorphism

Sinyaller: çok büyük köşe yarıçapı (20-30px) · pastel renkler · içte açık + dışta renkli yumuşak gölge

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Gerçekçi Taklitskeuomorphismklasik dönem

"gerçek nesne gibi: deri ajanda, metal düğme" diyorsan → adı skeuomorphism

Sinyaller: doku taklidi (deri/metal/kâğıt) · gerçekçi ışık: üstten parlama, altta gölge · basılabilir görünen kabarık butonlar

Detay + tam brief →

✦✦✦

Kayıt ol

30 saniyede hesabını aç

giriş yap

Y2K EstetiğiY2K digital aestheticretro dalga

"2000'lerin parlak krom-pembe bilgisayar havası" diyorsan → adı Y2K digital aesthetic

Sinyaller: krom/metalik degradeler · cyan-pembe-mor neonlar · yıldız/parıltı süsleri ✦

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Frutiger Aerofrutiger aeroretro dalga

"2007'lerin parlak mavi-yeşil, baloncuklu doğa-teknoloji havası" diyorsan → adı frutiger aero

Sinyaller: parlak gök mavisi + çimen yeşili · cam parlaması: üstte beyaz ışık şeridi · baloncuk/damla öğeleri

Detay + tam brief →

Kayıt ol

30 saniyede hesabını aç

giriş yap

Sıvı Camliquid glassmarka dili (Apple)

"yeni iPhone'lardaki akışkan, ışığı kıran cam katmanlar" diyorsan → adı liquid glass

Sinyaller: koyu zemin üstünde derin blur · arkada renkli ışık kürecikleri · üst kenarda parlak highlight çizgisi

Detay + tam brief →

ziyaretçi: 004217 · en iyi 800×600'de görüntülenir

Kayıt ol

30 saniyede hesabını aç

giriş yap

Ev Yapımı Webvernacular webretro / nostalji

"90'ların ziyaretçi sayaçlı, gri zeminli amatör sitesi" diyorsan → adı vernacular web

Sinyaller: gri zemin + sistem/serif font · saf mavi/mor linkler · inset/outset 2px kenarlıklar

Detay + tam brief →

ANİMASYONLAR — HAREKETİN ADI VAR

içerik belirir

Süzülerek girişfade-up / fade-in

Bölümler görünür olduklarında 0.5s'de aşağıdan 12px süzülüp belirsin (opacity 0→1 + translateY); prefers-reduced-motion'da kapalı.

Sıralı girişstagger

Liste/kart girişleri aynı anda değil 80ms arayla sırayla belirsin (animation-delay: index × 80ms) — 'tek tek diziliyor' hissi.

üzerime gel

Havaya kalkmahover lift

Kartlar hover'da 4px yukarı kalkıp gölgesi büyüsün (transform + box-shadow, 0.2s); dokunmatikte etkisiz kalması sorun değil.

Nabızpulse

Birincil CTA'da 2s'de bir yumuşak halka yayılsın (box-shadow ring 0→9px şeffaflaşarak); sayfada TEK öğede kullan.

yükleniyor

Parıltı süpürmesishimmer

Skeleton/öne-çıkan şeritte soldan sağa parlak süpürme aksın (45° degrade, background-position animasyonu, 1.6s loop).

★ M.AI ★ ATLAS ★ SKILL ★ M.AI ★ ATLAS ★ SKILL

Kayan şeritmarquee

Logo/rozet şeridi sabit hızda sola aksın (içerik iki kez basılır, translateX %0→-50 sonsuz loop); hover'da dursun.

Denetimi sen yaparsın.

Daktilotypewriter

Hero'daki tek satır, harf harf yazılsın (steps() ile width animasyonu + yanıp sönen imleç); yalnız kısa ve tek satırda kullan.

üzerime gel

Eğilmetilt

Kart hover'da imlece doğru 4-6° eğilsin (perspective + rotateX/Y); abartma — 3D oyuncaklık bir kartta şıktır, gridde mide bulandırır.