Liquid Glass UI

Tính năng chính

Liquid Glass UI là thư viện component React lấy cảm hứng từ hệ thống thiết kế visionOS của Apple.

• Component hiệu ứng Liquid Glass: gồm thẻ, nút, điều hướng, ô nhập, modal và nhiều thành phần khác với chất liệu trong mờ cùng hiệu ứng làm mờ nền động.
• Kết xuất theo thời gian thực: bộ lọc nền tăng tốc GPU và lấy mẫu màu động tạo hiệu ứng kính thích ứng với nội dung xung quanh.
• Điểm sáng phản chiếu: phản xạ ánh sáng tương tác đáp ứng thao tác người dùng và di chuyển trên bề mặt như kính thật khúc xạ ánh sáng.
• Hệ thống chuyển động mượt: đường cong easing đặc trưng của Apple và chuyển động dựa trên vật lý tạo tương tác tự nhiên.

Tính năng kỹ thuật

• Mọi hiệu ứng chạy trên GPU để hỗ trợ hoạt ảnh 60fps và tiết kiệm pin.
• Không có runtime JavaScript: hiệu ứng được triển khai bằng CSS, không phát sinh chi phí runtime JS.
• Thiết kế responsive, ưu tiên di động, hiển thị trên mọi kích thước màn hình và thiết bị.
• Ưu tiên khả năng tiếp cận: hỗ trợ trình đọc màn hình, điều hướng bằng bàn phím và tùy chọn giảm chuyển động; tuân thủ WCAG 2.1 AA.
• Hỗ trợ đầy đủ định nghĩa TypeScript và tương thích React 18+.

Cài đặt và sử dụng

# Cài đặt qua npm
npm install liquid-glass-ui

# Hoặc sao chép component
git clone liquid-glass-ui

Ví dụ sử dụng:

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

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

Trình duyệt được hỗ trợ

Hoạt động trên các trình duyệt hiện đại: Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ và Chrome cho Android 76+. Trên trình duyệt cũ, tính năng sẽ được giảm cấp phù hợp.

Tùy biến

Cung cấp nhiều tùy chọn tùy biến thông qua thuộc tính CSS tùy chỉnh, props của component và lớp modifier. Có thể điều chỉnh cường độ làm mờ, độ trong suốt, thời gian hoạt ảnh và bảng màu.

Đối tượng sử dụng

• Nhà phát triển React/Next.js
• Nhà thiết kế UI/UX
• Đội ngũ frontend theo đuổi thiết kế phong cách Apple
• Dự án cần hiệu ứng glassmorphism hiệu năng cao

Ưu điểm chính

• Hiệu ứng kính tích hợp, không cần tự viết CSS
• Kết xuất theo thời gian thực tăng tốc bằng GPU
• Component chất lượng cao lấy cảm hứng từ hệ thống thiết kế Apple
• Kích thước gói CSS nhỏ
• Hỗ trợ đầy đủ TypeScript