Kinetik tasarım: hareketi süs değil, anlatım aracı yapmak

Kinetik tasarım "her şey uçuşsun" demek değil. Hareketin bir görevi olması demek: kullanıcıya nerede olduğunu, neyin tıklanabilir olduğunu, neyin yeni geldiğini söylemesi.

Tek renk kuralı

Bu sitede sadece bir vurgu rengi var ve tek bir yerde tanımlı:

@theme {
  --color-primary: #6d5ef8;
}

Butonlar, linkler, kart kenarları, imleç parıltısı, seçim rengi, hatta scrollbar — hepsi bu değişkenden besleniyor. Tek satır değiştirince sitenin tamamı değişiyor.

Neden tek renk? Çünkü vurgu, seyrek olduğu ölçüde vurgudur. Beş rengin olduğu bir sayfada gözün nereye gideceği belli değildir. Bir rengin olduğu sayfada o renk "buraya bak" demektir. Geri kalan her şeyi griler taşır.

Buradaki hareketlerin görevleri

Kaydırma çubuğu (üstteki ince çizgi). Uzun bir yazıda "ne kadar kaldı" sorusunun cevabı. Ham kaydırma değerini doğrudan kullanmıyoruz, bir yay (spring) fonksiyonundan geçiriyoruz; böylece çizgi zıplamak yerine akıyor.

İmleci takip eden parıltı. Sayfaya derinlik katıyor ve imleci kaybetmemenizi sağlıyor. Kritik nokta: geriden takip ediyor. Anında yapışsaydı rahatsız edici olurdu.

Mıknatıs butonlar. İmleç yaklaşınca buton biraz ona doğru kayıyor. Bu, "ben tıklanabilirim" demenin sözsüz hali.

Görünüme girince süzülen bloklar. Her blok ekrana girdiğinde 24 piksel aşağıdan yukarı gelir. Kritik ayar once: true — bir kez oynar, geri kaydırınca tekrarlamaz. Tekrarlasaydı sayfa huzursuz olurdu.

Kayan şerit. Listeyi iki kez basıp CSS ile tam yarısı kadar kaydırıyoruz. Kopya, orijinalin bittiği yere tam denk geldiği için dikiş görünmüyor. Bu efekt için JavaScript'e hiç ihtiyaç yok.

Hareketi istemeyenler için

İşletim sisteminde "hareketi azalt" ayarı açık olan kullanıcılar var; vestibüler rahatsızlığı olanlar için bu bir erişilebilirlik meselesi. Tek bir CSS bloğuyla saygı duyuyoruz:

@media (prefers-reduced-motion: reduce) {
  .kd-marquee, .kd-breathe { animation: none; }
  html { scroll-behavior: auto; }
}

Site onlar için de tamamen çalışır durumda kalıyor — sadece sakinleşiyor.