Cara Membuat Efek Liquid Glass Apple di React

Apple selalu berada di garis depan desain antarmuka pengguna, dan salah satu efek terbaru mereka yang paling menawan adalah tampilan "kaca cair" (liquid glass). Efek ini, yang ditandai dengan tampilannya yang mengalir seperti jeli, menambahkan lapisan kedalaman dan interaktivitas pada elemen UI. Ini adalah cara yang halus namun kuat untuk membuat aplikasi Anda terasa lebih dinamis dan menarik.

Dalam artikel ini, kita akan menjelajahi cara membuat ulang efek menakjubkan ini di aplikasi React Anda menggunakan pustaka liquid-glass-react.

Pustaka ini menyediakan komponen yang sangat dapat disesuaikan dan mudah digunakan yang merangkum kompleksitas efek tersebut, memungkinkan Anda menambahkan sentuhan keajaiban desain Apple ke proyek Anda dengan sedikit usaha.

Memulai

Sebelum kita menyelami seluk-beluk efek kaca cair, mari kita siapkan pustaka liquid-glass-react di proyek kita.

Instalasi

Untuk menginstal pustaka, cukup jalankan perintah berikut di terminal Anda:

npm install liquid-glass-react

Atau jika Anda menggunakan Yarn:

yarn add liquid-glass-react

Penggunaan Dasar

Setelah pustaka terinstal, Anda dapat mulai menggunakan komponen LiquidGlass di aplikasi React Anda. Berikut adalah contoh dasar cara menggunakannya:

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass>
        <div style={{ padding: '20px' }}>
          Hello, Liquid Glass!
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

Ini akan merender kontainer kaca cair dasar di sekitar teks "Hello, Liquid Glass!". Meskipun ini adalah titik awal yang baik, kekuatan sejati pustaka ini terletak pada opsi penyesuaiannya yang luas.

Konsep Inti

Untuk sepenuhnya menghargai dan menggunakan pustaka liquid-glass-react secara efektif, akan sangat membantu untuk memahami konsep inti yang menggerakkan efek ini. Efek kaca cair terutama dicapai melalui kombinasi filter SVG, peta pergeseran (displacement maps), dan aberasi kromatik.

Filter SVG

Filter SVG (Scalable Vector Graphics) adalah fitur SVG yang kuat yang memungkinkan Anda menerapkan berbagai efek pada grafik Anda. Dalam kasus efek kaca cair, filter SVG digunakan untuk menciptakan distorsi dan blur yang memberikan tampilan khas pada komponen ini.

Pustaka liquid-glass-react menggunakan serangkaian primitif fe (filter effect) untuk mencapai efek yang diinginkan. Ini termasuk:

• feGaussianBlur: Primitif ini digunakan untuk menciptakan blur latar belakang yang merupakan komponen kunci dari efek kaca.
• feImage: Primitif ini digunakan untuk memuat peta pergeseran (displacement map), yang penting untuk menciptakan distorsi.
• feDisplacementMap: Ini adalah bintang utamanya. Ini menggunakan nilai piksel dari peta pergeseran untuk mendistorsi grafik sumber.
• feColorMatrix: Primitif ini digunakan untuk memanipulasi saluran warna gambar, yang merupakan cara efek aberasi kromatik dibuat.
• feBlend: Primitif ini digunakan untuk menggabungkan lapisan efek yang berbeda, seperti saluran merah, hijau, dan biru untuk aberasi kromatik.
• feComposite: Primitif ini digunakan untuk menggabungkan efek akhir dengan grafik sumber asli.

Peta Pergeseran (Displacement Maps)

Peta pergeseran adalah gambar skala abu-abu yang digunakan untuk mendistorsi gambar lain. Filter feDisplacementMap menggunakan nilai warna peta pergeseran untuk menggeser piksel grafik sumber. Area yang lebih terang pada peta pergeseran akan mendorong piksel grafik sumber ke satu arah, sementara area yang lebih gelap akan mendorongnya ke arah yang berlawanan.

Pustaka liquid-glass-react dilengkapi dengan tiga peta pergeseran bawaan:

• standard: Peta pergeseran standar dan halus.
• polar: Peta pergeseran dengan distorsi berbasis koordinat polar.
• prominent: Peta pergeseran dengan efek "gelembung" yang lebih menonjol.

Anda juga dapat menyediakan peta pergeseran kustom Anda sendiri, atau bahkan membuatnya secara dinamis menggunakan shader.

Aberasi Kromatik

Aberasi kromatik adalah efek optik yang terjadi ketika lensa gagal memfokuskan semua warna ke titik yang sama. Ini menghasilkan "pinggiran" warna di sekitar tepi objek. Meskipun ini umumnya dianggap sebagai efek yang tidak diinginkan dalam fotografi, ini dapat digunakan untuk menciptakan tampilan yang stylish dan futuristik dalam grafik digital.

Pustaka liquid-glass-react mensimulasikan aberasi kromatik dengan memisahkan gambar menjadi saluran merah, hijau, dan birunya, lalu menggeser setiap saluran dengan jumlah yang sedikit berbeda. Ini menciptakan efek pinggiran warna yang halus namun efektif yang menambah kesan "kaca" secara keseluruhan pada komponen.

Komponen LiquidGlass

Sekarang kita memiliki pemahaman dasar tentang konsep di balik efek kaca cair, mari kita lihat lebih dekat komponen LiquidGlass dan propertinya (props).

Komponen LiquidGlass adalah komponen utama pustaka ini. Ini adalah komponen yang sangat dapat disesuaikan yang memungkinkan Anda mengontrol setiap aspek efek kaca cair.

Berikut adalah beberapa properti kunci yang dapat Anda gunakan untuk menyesuaikan komponen:

• displacementScale: Mengontrol intensitas efek distorsi. Nilai yang lebih tinggi akan menghasilkan tampilan yang lebih terdistorsi dan "bergoyang".
• blurAmount: Mengontrol jumlah blur yang diterapkan pada latar belakang.
• saturation: Mengontrol saturasi latar belakang.
• aberrationIntensity: Mengontrol intensitas efek aberasi kromatik.
• elasticity: Mengontrol seberapa banyak komponen "meregang" ke arah kursor mouse. Ini menciptakan efek interaktif yang menyenangkan.
• cornerRadius: Mengontrol radius sudut komponen.
• mode: Mengontrol peta pergeseran mana yang digunakan. Anda dapat memilih antara standard, polar, prominent, dan shader.
• overLight: Boolean yang, jika benar, membuat kaca lebih gelap untuk visibilitas yang lebih baik pada latar belakang terang.

Kustomisasi

Kesenangan yang sebenarnya dimulai ketika Anda mulai bermain dengan properti komponen LiquidGlass. Dengan menggabungkan properti yang berbeda, Anda dapat menciptakan berbagai efek yang unik dan menarik.

Berikut adalah contoh komponen LiquidGlass yang lebih disesuaikan:

import React from 'react';
import LiquidGlass from 'liquid-glass-react';

function App() {
  return (
    <div className="App">
      <LiquidGlass
        displacementScale={100}
        blurAmount={0.5}
        saturation={140}
        aberrationIntensity={2}
        elasticity={0.35}
        cornerRadius={32}
        mode="polar"
        overLight={false}
      >
        <div style={{ padding: '20px' }}>
          Customized Liquid Glass
        </div>
      </LiquidGlass>
    </div>
  );
}

export default App;

Dalam contoh ini, kita telah meningkatkan displacementScale untuk menciptakan distorsi yang lebih jelas, dan kita telah mengatur mode ke polar untuk menggunakan peta pergeseran polar. Kita juga telah menambahkan sedikit elasticity untuk membuat komponen bereaksi terhadap kursor mouse.

Kesimpulan

Pustaka liquid-glass-react adalah alat yang kuat dan mudah digunakan untuk menciptakan efek kaca cair yang menakjubkan di aplikasi React Anda. Baik Anda seorang desainer berpengalaman atau pengembang yang ingin menambahkan sedikit gaya pada proyek Anda, pustaka ini memiliki sesuatu untuk ditawarkan.

Dengan opsi penyesuaiannya yang luas dan fitur-fitur canggihnya, pustaka liquid-glass-react adalah alat yang sempurna untuk menciptakan antarmuka pengguna generasi berikutnya. Jadi tunggu apa lagi? Cobalah dan lihat apa yang bisa Anda ciptakan!