Tutorial: Menerapkan Style UI Tren 2026 (Liquid Glass, Discomorphism, Kinetic Type)

Flat design yang generik mulai ditinggalkan. Di 2026, antarmuka kembali punya tekstur, kedalaman, dan gerak. Tutorial ini membahas cara menerapkan empat gaya tren teratas — bukan sekadar teori, tapi langsung dengan kode yang bisa kamu tempel ke proyek. Lihat juga galeri gaya UI untuk referensi visualnya.

Untuk siapa tutorial ini?

Tutorial ini ditujukan untuk pemula yang baru mengenal React/Next.js tetapi sudah pernah membuka editor kode. Tidak apa-apa kalau kamu belum hafal CSS — setiap baris akan dijelaskan.

• Tingkat: Pemula
• Perkiraan waktu: 30–45 menit
• Hasil akhir: 4 komponen UI bergaya tren 2026 yang berjalan di browser

Prasyarat (siapkan dulu)

Sebelum mulai, pastikan ini sudah ada di komputermu:

1. Node.js versi 18 ke atas. Cek dengan membuka Terminal (atau Command Prompt di Windows) lalu ketik:

   node -v

   Jika muncul angka seperti v20.11.0, kamu siap. Jika muncul error "command not found", unduh dan instal Node.js dari nodejs.org terlebih dahulu.

2. Editor kode, misalnya VS Code (gratis).

3. Proyek Next.js. Belum punya? Buat baru dengan perintah berikut, lalu ikuti pertanyaan yang muncul (tekan Enter untuk pilihan default):

   npx create-next-app@latest belajar-ui
   cd belajar-ui
   npm run dev

   Buka browser ke http://localhost:3000. Jika halaman Next.js muncul, lingkunganmu sudah benar.

Istilah: Terminal adalah aplikasi tempat mengetik perintah. localhost:3000 adalah alamat website-mu saat masih berjalan di komputer sendiri.

1. Liquid Glass

Evolusi dari glassmorphism: bukan sekadar blur, tapi kaca yang membias dan punya tepi mengkilap. Kuncinya ada di empat lapis: latar, blur, gradien tepi, dan specular highlight.

Langkah 1. Buat file baru bernama components/liquid-glass-card.tsx di dalam proyekmu. (Jika folder components belum ada, buat dulu folder itu.)

Langkah 2. Tempel kode berikut:

// components/liquid-glass-card.tsx
export function LiquidGlassCard() {
  return (
    <div
      // Latar warna/gambar WAJIB ada agar efek kaca terlihat
      style={{
        backgroundImage: "url('/covers/ui-trends-2026.png')",
        backgroundSize: "cover",
      }}
      className="flex min-h-80 items-center justify-center p-8"
    >
      <div className="liquid-glass max-w-sm p-6 text-white">
        <h3 className="text-xl font-semibold">Liquid Glass</h3>
        <p className="mt-2 text-sm opacity-90">
          Kaca yang membias dengan tepi mengkilap.
        </p>
      </div>
    </div>
  )
}

Langkah 3. Buka file app/globals.css dan tambahkan CSS ini di bagian paling bawah:

.liquid-glass {
  position: relative;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.08); /* warna kaca semi-transparan */
  backdrop-filter: blur(16px) saturate(160%); /* mem-blur apa pun di belakang */
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4), /* kilau di dalam */
    0 12px 40px rgba(0, 0, 0, 0.25); /* bayangan ke bawah */
}
 
/* Garis cahaya (specular highlight) di tepi atas */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.5) 0%, transparent 35%);
  pointer-events: none; /* agar tidak menghalangi klik */
}

Langkah 4. Tampilkan komponen di halaman utama. Buka app/page.tsx dan ubah isinya menjadi:

import { LiquidGlassCard } from "@/components/liquid-glass-card"
 
export default function Home() {
  return <LiquidGlassCard />
}

Yang harus kamu lihat: simpan semua file, lalu buka http://localhost:3000. Sebuah kartu transparan dengan tepi mengkilap muncul di atas gambar latar.

Penting: efek kaca hilang jika diletakkan di atas latar polos (putih saja). Selalu beri gambar atau warna di belakangnya.

2. Discomorphism

Tren mikro yang viral: ikon dan logo dirender sebagai mosaik cermin ala bola disko. Cara termudah di web adalah menempelkan tekstur cermin ke dalam teks dengan teknik background-clip: text.

Langkah 1. Siapkan satu gambar tekstur cermin/glitter dan simpan di folder public/textures/mirror-mosaic.png. (Belum punya? Cari gambar bebas pakai dengan kata kunci "mirror mosaic texture", lalu letakkan di folder itu.)

Langkah 2. Tambahkan CSS ini ke app/globals.css:

.disco-text {
  background-image: url("/textures/mirror-mosaic.png");
  background-size: cover;
  -webkit-background-clip: text; /* untuk Safari/Chrome */
  background-clip: text;         /* standar */
  color: transparent;            /* teks jadi "jendela" ke tekstur */
  font-weight: 800;
  filter: contrast(1.1) brightness(1.1);
}

Langkah 3. Pakai class-nya pada teks mana pun:

<h1 className="disco-text text-6xl">DISCO</h1>

Yang harus kamu lihat: tulisan "DISCO" yang isinya berupa tekstur cermin berkilau, bukan warna solid.

Istilah: background-clip: text membuat teks berfungsi seperti "lubang" yang menampilkan gambar latar di belakangnya.

3. Kinetic Typography

Tipografi raksasa yang berubah ketebalannya saat di-scroll, memanfaatkan variable font (font yang ketebalannya bisa diatur bebas, bukan cuma "bold/normal").

Langkah 1. Instal Framer Motion (library animasi) lewat Terminal:

npm install framer-motion

Langkah 2. Buat file components/kinetic-headline.tsx:

// components/kinetic-headline.tsx
'use client' // wajib: komponen ini memakai interaksi browser
 
import { motion, useScroll, useTransform } from 'framer-motion'
 
export function KineticHeadline() {
  // scrollYProgress = posisi scroll dari 0 (atas) sampai 1 (bawah)
  const { scrollYProgress } = useScroll()
  // ubah posisi scroll menjadi angka ketebalan font 200 → 900
  const weight = useTransform(scrollYProgress, [0, 1], [200, 900])
  const fontVariationSettings = useTransform(weight, (w) => `"wght" ${w}`)
 
  return (
    <motion.h1
      style={{ fontVariationSettings }}
      className="text-[18vw] leading-none tracking-tight"
    >
      DESAIN
    </motion.h1>
  )
}

Langkah 3. Tampilkan di halaman dan beri ruang scroll agar efeknya terasa:

import { KineticHeadline } from "@/components/kinetic-headline"
 
export default function Home() {
  return (
    <main className="min-h-[200vh] p-8">
      <KineticHeadline />
    </main>
  )
}

Yang harus kamu lihat: saat kamu menggulir halaman, huruf "DESAIN" perlahan menebal. Gunakan font seperti Inter atau Roboto Flex yang mendukung pengaturan wght agar transisinya mulus.

4. Spatial 3D / Depth UI

Untuk kedalaman nyata tanpa library berat, manfaatkan properti perspective dan transform bawaan CSS.

Langkah 1. Tambahkan ke app/globals.css:

.depth-scene {
  perspective: 1200px; /* "jarak kamera" — makin kecil makin dramatis */
}
 
.depth-card {
  transform: rotateY(-12deg) translateZ(40px); /* miring + maju ke arah kita */
  transition: transform 0.4s ease;             /* animasi halus */
}
 
.depth-card:hover {
  transform: rotateY(0deg) translateZ(80px); /* lurus & lebih maju saat disentuh */
}

Langkah 2. Pakai di komponen:

<div className="depth-scene">
  <div className="depth-card rounded-xl bg-card p-6 shadow-lg">
    Arahkan kursor ke sini
  </div>
</div>

Yang harus kamu lihat: kartu tampak miring 3D, lalu menghadap lurus dan "maju" saat disentuh kursor.

Untuk objek 3D penuh (model berputar), gunakan React Three Fiber. Tapi untuk efek kedalaman sederhana, CSS di atas sudah cukup.

Kapan memakai apa?

Troubleshooting (jika gagal)

• Kaca tidak transparan / blur tidak muncul → pastikan ada latar berwarna/gambar di belakangnya, dan browser-mu versi terbaru.
• 'use client' error → baris 'use client' harus berada di paling atas file, sebelum semua import.
• Teks disco tampak solid → cek path gambar /textures/mirror-mosaic.png sudah benar dan filenya ada di folder public.
• Perubahan tidak terlihat → simpan file (Ctrl/Cmd+S) dan pastikan npm run dev masih berjalan di Terminal.

Jangan menumpuk keempat gaya di satu halaman. Pilih satu sebagai identitas utama, lalu pakai sisanya sebagai aksen. Setelah desainmu siap, lanjut ke Panduan Deploy untuk menayangkannya.