Liquid Glass UI

Funzionalità principali

Liquid Glass UI è una libreria di componenti React ispirata al sistema di design visionOS di Apple.

• Componenti con effetto Liquid Glass: schede, pulsanti, navigazione, campi, modali e altro con materiali traslucidi e sfocatura dinamica dello sfondo.
• Rendering in tempo reale: filtri dello sfondo accelerati dalla GPU e campionamento dinamico dei colori adattano gli effetti al contenuto circostante.
• Riflessi speculari: le riflessioni interattive rispondono alle azioni dell’utente e si muovono sulle superfici come la luce rifratta dal vetro reale.
• Sistema di movimento fluido: curve di easing tipiche di Apple e movimento basato sulla fisica per interazioni naturali.

Caratteristiche tecniche

• Tutti gli effetti vengono eseguiti sulla GPU per animazioni a 60 fps ed efficienza della batteria.
• Nessun runtime JavaScript: gli effetti sono implementati in CSS senza overhead del runtime JS.
• Design responsive con approccio mobile-first per schermi e dispositivi di ogni dimensione.
• Accessibilità prioritaria: supporto a screen reader, navigazione da tastiera e preferenze per la riduzione del movimento; conformità WCAG 2.1 AA.
• Definizioni TypeScript complete e compatibilità con React 18+.

Installazione e utilizzo

# Installa tramite npm
npm install liquid-glass-ui

# Oppure copia i componenti
git clone liquid-glass-ui

Esempio d’uso:

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

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

Supporto dei browser

Funziona sui browser moderni: Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ e Chrome per Android 76+. Sui browser meno recenti offre una degradazione graduale.

Personalizzazione

Offre ampie opzioni tramite proprietà CSS personalizzate, props dei componenti e classi modificatrici. Puoi regolare intensità della sfocatura, trasparenza, tempi delle animazioni e combinazioni di colori.

Utenti target

• Sviluppatori React/Next.js
• Designer UI/UX
• Team frontend che cercano un design ispirato ad Apple
• Progetti che richiedono effetti glassmorphism ad alte prestazioni

Vantaggi principali

• Effetti vetro integrati senza CSS manuale
• Rendering in tempo reale accelerato dalla GPU
• Componenti di alta qualità ispirati al sistema di design Apple
• Bundle CSS di dimensioni ridotte
• Supporto completo a TypeScript