Liquid Glass UI

Fonctionnalités principales

Liquid Glass UI est une bibliothèque de composants React inspirée du système de design visionOS d’Apple.

• Composants Liquid Glass : cartes, boutons, navigation, champs, modales et autres éléments avec matériaux translucides et flou d’arrière-plan dynamique.
• Rendu en temps réel : filtres d’arrière-plan accélérés par GPU et échantillonnage dynamique des couleurs pour adapter les effets au contenu environnant.
• Reflets spéculaires : les reflets interactifs réagissent aux actions de l’utilisateur et se déplacent sur les surfaces comme sur du vrai verre.
• Système de mouvement fluide : animations fondées sur les courbes d’accélération et le mouvement physique d’Apple.

Caractéristiques techniques

• Effets optimisés pour le GPU, avec animations à 60 ips et efficacité énergétique.
• Zéro runtime JavaScript : effets implémentés en CSS, sans surcharge d’exécution JS.
• Design responsive et approche mobile-first pour toutes les tailles d’écran et tous les appareils.
• Accessibilité prioritaire : lecteurs d’écran, navigation au clavier et préférence de réduction des mouvements, avec conformité WCAG 2.1 AA.
• Prise en charge complète de TypeScript et compatibilité React 18+.

Installation et utilisation

# Installer via npm
npm install liquid-glass-ui

# Ou copier les composants
git clone liquid-glass-ui

Exemple d’utilisation :

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

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

Compatibilité des navigateurs

Compatible avec les navigateurs modernes : Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ et Chrome pour Android 76+. Le rendu se dégrade progressivement sur les navigateurs plus anciens.

Personnalisation

La bibliothèque propose de nombreuses options via les propriétés CSS personnalisées, les props des composants et les classes de modification. Ajustez l’intensité du flou, la transparence, le rythme des animations et les palettes de couleurs.

Utilisateurs visés

• Développeurs React et Next.js
• Designers UI/UX
• Équipes frontend recherchant un design inspiré d’Apple
• Projets nécessitant des effets de glassmorphisme performants

Avantages

• Effets de verre intégrés sans écrire manuellement le CSS
• Rendu en temps réel accéléré par GPU
• Composants de qualité inspirés du système de design Apple
• Taille de bundle CSS réduite
• Prise en charge complète de TypeScript