Sharing CSS Tanpa JavaScript Part 1 — Kinetic Caption: Satu Kata Satu Spotlight

Seringkali kita langsung tergoda menggunakan library animasi JavaScript berat seperti GSAP hanya untuk membuat efek teks bertahap (kinetic typography). Padahal, fitur modern CSS sudah lebih dari cukup untuk menghasilkan animasi caption yang mulus dan hemat performa.

Di sesi video pendek ini, saya menunjukkan bagaimana membuat efek Kinetic Caption dengan teknik satu kata satu spotlight secara 100% menggunakan CSS murni.

Timestamp Video

• 00:00 — Konsep satu kata satu spotlight untuk kinetic caption
• 00:10 — Salin kode CSS & pasang ke HTML di code editor
• 00:52 — Demo hasil animasi running spotlight teks
• 01:04 — Eksperimen live parameter animasi di CSSKit playground

Konsep Dasar

Trik utama ada pada pemisahan kata ke dalam tag <span> dengan custom property CSS (variabel --delay) yang diatur bertingkat:

<p class="kinetic-caption">
  <span style="--i: 0;">Satu</span>
  <span style="--i: 1;">kata</span>
  <span style="--i: 2;">satu</span>
  <span style="--i: 3;">spotlight.</span>
</p>

.kinetic-caption span {
  display: inline-block;
  opacity: 0.25;
  filter: blur(2px);
  transform: translateY(4px);
  animation: spotlight 2.4s infinite ease-in-out;
  animation-delay: calc(var(--i) * 0.4s);
}

@keyframes spotlight {
  0%, 100% {
    opacity: 0.25;
    filter: blur(2px);
    transform: translateY(4px);
    color: var(--text-muted);
  }
  30%, 60% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
    color: var(--color-tech-blue);
    text-shadow: 0 0 16px rgba(0, 175, 255, 0.6);
  }
}

Mengapa Pilih CSS Murni?

1. Nol Overhead JavaScript: Tidak ada thread komputasi browser yang terbebani oleh requestAnimationFrame atau library pihak ketiga.
2. GPU Accelerated: Properti transform dan opacity otomatis di-offload ke compositing layer GPU browser.
3. Responsive & Mobile Friendly: Tidak membuat frame drop pada perangkat mobile berspesifikasi rendah.

Tonton demonstrasi visualnya di video player di atas!