Menghapus Foto Latar Hero, Cukup Pakai Motif Garis CSS

Saya lagi ngirim commit yang menghapus foto latar hero di situs Next.js bilingual saya. File frontend/src/app/globals.css dan frontend/src/components/home/hero.tsx terbuka di editor. Layar menunjukkan kode lama yang mengandalkan bg-[url('/images/bg-website.jpg')] dengan lapisan overlay untuk mode terang dan mode gelap. Warisan desain itu emang terlalu terang, makanya butuh peredam agar teks tetap terbaca.

Awalnya saya kira mengganti tampilan yang membosankan ini butuh aset gambar baru atau library animasi JavaScript yang berat. Saya sempat berpikir harus mencari ilustrasi vektor yang pas atau mengandalkan paket animasi pihak ketiga supaya terlihat dinamis. Dugaan itu salah besar.

Ternyata solusinya jauh lebih ringan. Saya cukup membuat satu elemen div dengan atribut aria-hidden="true" [5] dan menerapkan gradient background arbitrer Tailwind. Tidak ada gambar, tidak ada library tambahan. Hanya CSS murni yang membentuk motif garis diagonal secara programatik.

Membangun lapisan dekoratif murni

Latar belakang baru ini menggunakan linear-gradient yang diatur sedemikian rupa. Nilainya kurang lebih seperti ini: transparan di 46 persen, lalu campuran warna aksen dengan transparansi 92 persen di titik 50 persen, dan kembali transparan di 54 persen. Fungsi color-mix() mengambil nilai warna dan mengembalikan campurannya di ruang warna tertentu; defaultnya oklab, dan mencampur dengan transparan bekerja melalui pengali alfa ketika persentase total di bawah 100 persen [9].

Agar pola ini berulang membentuk garis-garis diagonal, saya mengatur background-size menjadi 100 piksel kali 100 piksel. Properti ini dengan dua nilai mengatur lebar dan tinggi gambar latar, relatif terhadap area pemosisian background [10]. Hasilnya adalah pola garis halus yang konsisten di seluruh area hero, tanpa perlu memuat file gambar berukuran ratusan kilobita.

Ini sangat membantu terutama karena situs ini bilingual. Variasi panjang teks antara dua bahasa sering kali membuat komposisi foto latar menjadi canggung, sedangkan pola CSS yang berulang ini tetap rapi ke arah mana pun tanpa perlu penyesuaian manual.

Saya punya pendapat tegas soal ini. Background foto dengan overlay gelap sebenarnya adalah beban mati ketika motif CSS yang digerakkan oleh token desain sudah bisa membawa identitas merek. Menumpuk overlay di atas foto adalah smell dalam desain yang sering kita abaikan hanya karena terbiasa.

Menggerakkan pola tanpa memberatkan browser

Pola statis saja sudah bagus, tapi sedikit gerakan bisa membuat halaman terasa lebih hidup. Di sinilah animasi masuk. Saya membuat @keyframes yang menggeser lapisan motif secara horizontal. Aturan @keyframes mengikat waypoint animasi dan properti animation menggerakkannya [1].

Pergerakannya menggunakan translate3d(0, 0, 0) ke translate3d(120px, 0, 0) dengan durasi 28 detik, linear, dan berulang tanpa henti. Pilihan transform ini bukan kebetulan. Animasi yang hanya mengubah transform menghindari proses layout dan paint, sehingga tetap berada di compositor [4]. Browser tidak perlu menghitung ulang geometri elemen setiap frame, membuat animasi tetap mulus bahkan di perangkat kelas menengah.

@keyframes hero-stripes {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(120px, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-motif {
    animation: hero-stripes 28s linear infinite;
  }
}

Menghormati preferensi pengguna

Pentingnya bagian ini sering disepelekan: bagaimana kita memperlakukan pengguna yang sensitif terhadap gerakan. Media query prefers-reduced-motion: no-preference membatasi animasi, sehingga pengguna dengan preferensi pengurangan gerakan tetap melihat lapisan statis tanpa animasi drift [2].

Mereka tidak kehilangan konteks visual. Garis-garis diagonal itu tetap ada sebagai elemen dekoratif, hanya saja tidak bergeser. Ini adalah bentuk respek dasar terhadap aksesibilitas. Kita tidak memaksa otak pengguna memproses gerakan yang bisa memicu ketidaknyamanan, tapi kita juga tidak menghapus identitas visual halaman demi kepatuhan buta.

Implementasi motif ini mengubah cara saya memandang aset dekoratif. Saya tidak lagi langsung mencari gambar saat butuh latar belakang yang menarik. Saya mulai bertanya dulu, apakah ini bisa diselesaikan dengan beberapa baris CSS yang lebih ringan dan lebih mudah dirawat.

Keputusan untuk meninggalkan aset gambar bukan sekadar menghemat bandwidth atau memperbaiki skor performa. Ini tentang menyederhanakan pipeline desain. Saya menyadari bahwa kadang solusi paling elegan justru tidak menambah apa pun ke dalam proyek, melainkan berani membuang apa yang selama ini dianggap perlu padahal tidak.