Memoles UI dengan skill design-engineering Emil

Situs ini menjual disiplin rekayasa, jadi ia harus benar-benar disiplin — console bersih, SSG cepat, dua-hex yang menahan diri. Kami menjalankan skill design-engineering Emil Kowalski ke seluruh antarmuka, dan ia menemukan satu hal yang belum dimiliki sistem motion kami: press feedback (respons saat ditekan). Berikut yang kami ubah, perbandingan before/after-nya, dan kenapa kami menggambar perbandingan itu dengan SVG, bukan GIF hasil render Remotion.

Apa itu sebuah "design skill"

Emil Kowalski membuat komponen yang diam-diam dipakai banyak situs — Sonner (toast) dan Vaul (drawer) — dan mengajarkan kerajinannya di animations.dev. Skill-nya adalah selera itu, ditulis sebagai aturan yang bisa diterapkan agent AI: satu file portabel yang merangkum bagaimana antarmuka seharusnya terasa — kapan beranimasi dan kapan tidak, easing-nya apa, secepat apa, serta detail tak kasat mata yang memisahkan "berfungsi" dari "terasa pas".

Anda arahkan coding agent ke skill itu lalu minta polish pass. Ia meninjau CSS asli Anda terhadap aturannya dan mengusulkan perbaikan Before → After yang konkret — bukan kira-kira, melainkan sebuah diff. Ini gerakan yang sama yang kami pakai untuk AI di seluruh situs ini: rangkum penilaian sang ahli, lalu biarkan ia berjalan.

Celah yang ditemukannya: tak ada yang merespons tekanan

Tombol dan card kami sudah terangkat saat hover. Tapi tak ada state :active di mana pun — jadi begitu pengguna benar-benar menekan, tak ada yang terjadi. Antarmuka bereaksi pada kursor yang melintas di atasnya, tapi tidak pada klik-nya sendiri. Padahal itu micro-interaction yang paling terasa di situs mana pun, dan ia bisu.

Pemetaan before → after

Satu pass CSS-only, hanya transform/opacity (supaya tetap di GPU), token tak diubah:

Rilis sama pentingnya dengan tekanan. Turunnya cepat (~90ms) tapi pantulannya mengikuti base 0.2s — tegas saat turun, gesit saat naik. Elemen yang bisa ditekan harus terasa mantap saat masuk dan ringan saat kembali.

Aturan di balik perbaikannya

Skill ini bukan sebuah gaya; ia daftar pendek default yang sadar-fisika. Yang menggerakkan pass ini:

Berikut press yang sebenarnya, lengkap dengan specificity-nya — aturan :active harus menang atas hover lift, dan tekanan lebih cepat daripada rilis:

/* turun cepat (~90ms), rilis gesit lewat base 0.2s — dan press menang atas
   hover lift berkat urutan sumber + specificity. */
.rv-btn:active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 0.09s;
}

Dan karena motion tak pernah wajib, reveal FAQ keluar dengan rapi:

SVG atau Remotion untuk before/after?

Perbandingan di atas adalah inline SVG, bukan GIF rekaman. Itu pilihan yang sengaja — Remotion (React → video) sangat bagus, tapi ia alat yang keliru untuk figur yang tertanam di situs seperti ini:

Patokan: SVG untuk figur yang hidup di dalam halaman; Remotion untuk video yang keluar darinya. Kalau nanti kami memotong klip before/after untuk dibagikan, di situlah Remotion berperan.

Jalankan di UI Anda sendiri

Pass-nya bisa diulang dan rendah-risiko:

1. Arahkan agent Anda ke skill itu lalu minta polish pass untuk sebuah komponen atau halaman.
2. Baca tabel Before → After yang ia kembalikan — tiap baris adalah aturan spesifik, bukan tebakan.
3. Terapkan yang menang sebagai perubahan CSS-only (transform/opacity), tiap :active diverifikasi menang atas :hover-nya lewat specificity.
4. Validasi: aturan masuk ke cascade, nol error console, reduced-motion dihormati, build bersih. Rilis diff-nya.

Semua ini tak terlihat di screenshot — ia hidup sepenuhnya di tekanan. Itulah intinya: seribu detail nyaris tak terdengar, semua selaras nadanya.

Pertanyaan umum

Sources

1. Emil Kowalski — skill design-engineering
2. animations.dev — kursus animasi Emil Kowalski
3. Remotion — membuat video secara programatik di React
4. MDN — prefers-reduced-motion