Cara Bikin Kinetic Type yang Responsive Terhadap Gerakan

www.3str.net

Bikin UI/UX website makin kelihatan mahal dan estetik ala Awwwards itu nggak sesulit yang kamu bayangkan. Yuk, simak panduan bikin efek kinetic type interaktif yang responsif kursor cuma pake HTML, CSS, dan sedikit sentuhan JavaScript!

Step 1: Siapkan Struktur HTML

Bikin elemen teks sederhana yang dibungkus div container. Trik utamanya adalah memecah teks menjadi karakter individual supaya bisa dianimasikan satu per satu.

HTML

<div class="container">
  <h1 class="kinetic-text">KINETIC</h1>
</div>

Step 2: Styling Dasar CSS & Variable

Gunakan CSS Variable untuk menyimpan koordinat posisi kursor agar JavaScript bisa mengirimkan nilainya ke CSS secara real-time.

Threestudio

CSS

body {
  margin: 0;
  background: #0d0d0d;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Syne', sans-serif; /* Pake font tebal biar efeknya jelas */
  overflow: hidden;
}

.kinetic-text {
  font-size: 8rem;
  font-weight: 800;
  letter-spacing: 2px;
  /* Properti khusus untuk manipulasi variabel dari JS */
  transform: translate(calc(var(--mouse-x) * 30px), calc(var(--mouse-y) * 30px)) 
             rotate(calc(var(--mouse-x) * 15deg));
  transition: transform 0.1s ease-out;
}

Step 3: Magic JavaScript (Tracking Kursor)

Tambahkan event listener mousemove untuk menangkap koordinat kursor pengguna dan mengkalkulasi nilainya relatif terhadap tengah layar.

JavaScript

const textElement = document.querySelector('.kinetic-text');

window.addEventListener('mousemove', (e) => {
  // Hitung posisi kursor dari tengah layar (-1 sampai 1)
  const x = (e.clientX / window.innerWidth) * 2 - 1;
  const y = (e.clientY / window.innerHeight) * 2 - 1;

  // Kirim nilai posisi ke CSS Variables
  textElement.style.setProperty('--mouse-x', x);
  textElement.style.setProperty('--mouse-y', y);
});

Tips Biar Tampilan Makin Estetik & Anti Lag

Pakai Font Variable: Gunakan font yang mendukung variabel weight atau width (seperti Inter atau Roboto Flex). Kamu bisa mengubah ketebalan font secara dinamis saat kursor mendekat.
Optimasi Perfomance: Selalu gunakan properti CSS transform atau opacity daripada merubah margin atau padding. Ini memastikan FPS animasi tetap lancar di angka 60fps tanpa membebankan kerja CPU.
Gunakan Library (Opsional): Kalau mau bikin efek riak, bend/warp, atau 3D yang lebih kompleks, kamu bisa kombinasikan dengan library seperti GSAP (GreenSock) atau Three.js.

Dengan sedikit eksperimen pada angka transform dan koordinat, website kamu dijamin bakal makin catchy dan berkesan profesional di mata pengunjung! Selamat mencoba!

Creative Gubuku