LiquidGlass

Qu'est-ce que LiquidGlass ?

LiquidGlass est une bibliothèque légère JavaScript/TypeScript qui rend des effets verre réalistes sur n'importe quel élément HTML à l'aide de shaders WebGL. Elle applique réfraction, flou, aberration chromatique, reflets spéculaires et comportements d'éclairage associés en capturant le contenu DOM derrière chaque élément verre et en le compositant en temps réel.

La bibliothèque est conçue pour fonctionner avec des arrière-plans de page arbitraires (images, vidéos, canvases ou HTML simple). Elle utilise un pipeline de rendu multi-passes et peut gérer plusieurs couches verre, configuration par élément et mises à jour dynamiques sur la page.

Fonctionnalités principales

• Rendu verre basé sur shaders WebGL pour éléments HTML : Génère l'aspect verre en traitant le contenu DOM derrière l'élément verre et en le compositant comme sortie shader.
• Pipeline multi-passes en temps réel : Prend en charge des effets comme la réfraction, contrôle de la force de flou, frange chromatique aux bords, et comportements d'éclairage spéculaire/rim.
• Configuration par élément et globale : Configurez chaque élément verre individuellement via data-config (JSON) ou définissez des valeurs globales par l'option defaults.
• Composition verre en couches : Prend en charge les configurations verre-sur-verre via son approche de composition.
• Options de positionnement interactif : Peut injecter un comportement de panneau flottant et déplaçable quand activé (ex. floating: true), et inclut un mode button pour rétroaction shader au survol/appui.
• Contrôles de surface réalistes : Paramètres incluent cornerRadius, zRadius (profondeur biseautage), bevelMode (mode courbure forme), brightness, saturation, shadowOpacity, et réflexion fresnel.

Comment utiliser LiquidGlass

1. Installer ou importer : Installez via npm (npm install @ybouane/liquidglass) ou importez directement depuis le CDN (https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js).
2. Créer un conteneur racine positionné : L'élément root passé à LiquidGlass.init() doit être un conteneur avec position: relative.
3. Ajouter des éléments verre dans la racine : Chaque élément verre doit être un enfant direct de la racine. À l'initialisation, LiquidGlass injecte un <canvas> comme premier enfant de l'élément verre pour la sortie shader.
4. Initialiser : Créez l'instance avec LiquidGlass.init({ root: document.querySelector('#my-root'), glassElements: document.querySelectorAll('.glass') }) et nettoyez plus tard avec instance.destroy().
5. Configurer les effets : Fournissez des réglages par élément via element.dataset.config = JSON.stringify({ ... }) (ex. quantité de flou, réfraction, rayon d'angle). Utilisez le motif playground pour ajuster les paramètres visuellement.

Cas d'usage

• Cartes et panneaux « verre » personnalisés : Appliquez un style verre givré, sombre ou standard à un élément carte en ajustant blurAmount, brightness, cornerRadius et zRadius.
• Lentille interactive style loupe : Utilisez bevelMode: 1 avec cornerRadius et zRadius assortis pour un effet demi-sphère/dôme (et activez optionnellement floating).
• Rétroaction UI survol/appui : Définissez button: true pour que l'élément verre réagisse aux interactions utilisateur — survol illumine et appui aplatit le biseautage tout en approfondissant l'ombre.
• Compositions verre-sur-verre en couches : Construisez une UI multi-couches où différents éléments verre se chevauchent, en exploitant la composition LiquidGlass pour des effets superposés.
• Verre sur arrière-plans riches : Placez des éléments verre sur des arrière-plans comme images, vidéos, canvases ou contenu HTML standard, tout en gardant ces arrière-plans parmi les enfants échantillonnés de la racine.

FAQ

Ai-je besoin d'une structure DOM spécifique ?
Oui. La root doit être un conteneur positionné (position: relative), et chaque élément verre doit être un enfant direct de la racine. Les éléments verre imbriqués sont rejetés à l'initialisation avec un avertissement console.

Que capture LiquidGlass pour l'effet verre ?
Le shader échantillonne les enfants de la root, donc le contenu comme les images d'arrière-plan doit être dans un élément frère à l'intérieur de la root. La root elle-même n'est pas capturée.

LiquidGlass crée-t-il des éléments DOM pour moi ?
Il injecte un <canvas> comme premier enfant de l'élément verre pour rendre la sortie shader. À cause de cela, évitez de dépendre des sélecteurs CSS :first-child pour l'élément verre.

Puis-je utiliser plusieurs racines LiquidGlass sur la même page ?
Les limitations indiquent que plusieurs racines LiquidGlass ne peuvent pas partager la réfraction. De plus, les éléments verre d'une root ne voient pas ce que rendent les éléments verre d'une autre root.

Y a-t-il des considérations de performance ?
Oui. La bibliothèque repose sur la rasterisation DOM en temps réel et un pipeline WebGL multi-passes, et la capture DOM dans un canvas est décrite comme coûteuse.

Alternatives

• Effets verre uniquement CSS (backdrop-filter / techniques basées sur le flou) : Des approches plus simples et purement CSS peuvent approximer le verre dépoli, mais n’offriront généralement pas le même comportement de pipeline réfraction/aberration chromatique/spéculaire.
• Frameworks de shaders WebGL ou implémentations Three.js/WebGL personnalisées : Si vous avez besoin d’un contrôle total, vous pouvez implémenter vos propres passes de shaders ; cela déplace le travail d’une abstraction de bibliothèque vers votre propre pipeline de rendu.
• Autres pipelines DOM vers canvas/effets en temps réel : Des solutions adjacentes qui rasterisent le DOM en textures peuvent créer des effets screen-space, mais le workflow et la configuration différeront de la configuration d’éléments verre basée sur le DOM de LiquidGlass.
• Ressources de design statiques : Pour les cas sans interactions ni mises à jour en temps réel, des images verre pré-rendues ou composants exportés réduisent les coûts d’exécution, au détriment des changements de réfraction/paramètres dynamiques.