Liquid Glass UI

Fitur utama

Liquid Glass UI adalah library komponen React yang terinspirasi sistem desain visionOS milik Apple.

• Komponen efek Liquid Glass: kartu, tombol, navigasi, input, modal, dan lainnya dengan material transparan serta efek blur latar dinamis.
• Rendering real-time: filter latar yang dipercepat GPU dan pengambilan sampel warna dinamis menghasilkan efek kaca yang menyesuaikan konten sekitar secara real-time.
• Highlight spekular: pantulan cahaya interaktif merespons interaksi pengguna dan bergerak di permukaan seperti kaca sungguhan.
• Sistem gerak halus: kurva easing khas Apple dan gerakan berbasis fisika menciptakan interaksi yang organik.

Fitur teknis

• Semua efek berjalan di GPU untuk animasi 60fps dan efisiensi baterai.
• Tanpa runtime JavaScript: semua efek diimplementasikan melalui CSS tanpa overhead runtime JS.
• Desain responsif dengan pendekatan mobile-first untuk semua ukuran layar dan perangkat.
• Aksesibilitas sebagai prioritas: mendukung pembaca layar, navigasi keyboard, dan preferensi pengurangan gerakan, serta sesuai WCAG 2.1 AA.
• Dukungan TypeScript lengkap dan kompatibilitas dengan React 18+.

Instalasi dan penggunaan

# Instal melalui npm
npm install liquid-glass-ui

# Atau salin komponen
git clone liquid-glass-ui

Contoh penggunaan:

import { GlassCard } from 'liquid-glass-ui'

<GlassCard variant='intense' interactive specular>
  Your content
</GlassCard>

Dukungan browser

Bekerja di browser modern: Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+, dan Chrome untuk Android 76+. Pada browser lama, fitur akan menurun secara bertahap.

Kustomisasi

Menyediakan banyak opsi kustomisasi melalui properti kustom CSS, props komponen, dan kelas modifier. Sesuaikan intensitas blur, tingkat transparansi, waktu animasi, dan skema warna.

Pengguna sasaran

• Developer React/Next.js
• Desainer UI/UX
• Tim pengembangan frontend yang mengejar desain bergaya Apple
• Proyek yang memerlukan efek glassmorphism berperforma tinggi

Keunggulan utama

• Efek kaca bawaan tanpa CSS manual
• Rendering real-time yang dipercepat GPU
• Komponen berkualitas tinggi yang terinspirasi sistem desain Apple
• Ukuran bundle CSS minimal
• Dukungan TypeScript lengkap