Membuat Form Login Lebih Hidup dengan Animasi Karakter Gembok Lucu

Bosan dengan form login yang kaku? Simak bedah desain autentikasi unik ini yang menggunakan karakter gembok animasi CSS untuk meningkatkan pengalaman pengguna (UX) dan interaktivitas.

Konsep "Emotional Design"

Desain ini adalah contoh sempurna dari Emotional Design. Alih-alih hanya memberikan feedback berupa teks "Login Berhasil" atau "Password Salah", desainer menciptakan karakter yang seolah-olah "hidup".

Berikut adalah detail interaksi yang terjadi:

1. Keadaan Idle (Diam): Karakter gembok memiliki mata yang berkedip secara natural. Ini memberi sinyal bahwa sistem "siap" dan aktif.

2. Input Password: Saat pengguna mengetik, fokus pengguna tertuju pada kolom, dan gembok menemani proses tersebut.

3. Validasi Sukses: Saat tombol ditekan dan password benar, gembok tersenyum lebar, batang gembok terbuka, dan latar belakang berubah menjadi hijau.

Berikut kode CSS

.padlock__eye {
position: absolute;
background: #000;
border-radius: 50%;
-webkit-animation: blink 4s infinite linear;
animation: blink 4s infinite linear;
}

@keyframes blink {
0%, 24%, 27%, 100% {
transform: scaleY(1); 
}
25%, 26% {
transform: scaleY(0);
}
}

LINK SOURCE CODE

Silahkan download source codenya gratis dan untuk hasil tampilanya silahkan lihat pada video TikTok dibawah ini.

GET CODE    WATCH HERE.!

Kesimpulan

Membangun antarmuka web bukan hanya soal fungsi, tapi juga soal rasa. Dengan sedikit kreativitas menggunakan CSS Animation dan pemahaman tentang user behavior, elemen sederhana seperti form login bisa disulap menjadi pengalaman yang menyenangkan.

Tertarik mencoba? Salin atau download kode di atas, lalu buka di editor teks Anda dan mulailah berkreasi, Selamat mencoba!

 Untuk Mendapatkan Info Terbaru, Silahkan Bergabung Di Saluran Kami Dibawah ini: