Liquid Glass UI

Belangrijkste functies

Liquid Glass UI is een React-componentbibliotheek geïnspireerd op Apples visionOS-ontwerpsysteem.

• Liquid Glass-effecten: kaarten, knoppen, navigatie, invoervelden, modals en meer met transparante materialen en dynamische achtergrondvervaging.
• Realtime rendering: GPU-versnelde achtergrondfilters en dynamische kleurmonsters passen glaseffecten direct aan de omliggende inhoud aan.
• Speculaire highlights: interactieve lichtreflecties reageren op gebruikersacties en bewegen over oppervlakken.
• Vloeiend bewegingssysteem: Apples kenmerkende easing-curves en fysiek gebaseerde beweging zorgen voor natuurlijke interacties.

Technische functies

• Alle effecten draaien op de GPU voor animaties op 60 fps en een lager batterijverbruik.
• Effecten zijn volledig met CSS geïmplementeerd, zonder JavaScript-runtimeoverhead.
• Mobile-first en responsive voor alle schermformaten en apparaten.
• Ondersteuning voor schermlezers, toetsenbordnavigatie en voorkeuren voor minder beweging; WCAG 2.1 AA-conform.
• Volledige TypeScript-definities en compatibiliteit met React 18+.

Installatie en gebruik

npm install liquid-glass-ui

git clone liquid-glass-ui

Voorbeeld: <GlassCard variant="intense" interactive specular>Your content</GlassCard>

Browserondersteuning

Werkt in Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ en Chrome for Android 76+. In oudere browsers worden effecten op een geschikte manier vereenvoudigd.

Aanpassing en doelgroepen

Pas vervagingsintensiteit, transparantie, animatietiming en kleurenschema's aan met CSS custom properties, componentprops en modifier classes. De bibliotheek is bedoeld voor React/Next.js-ontwikkelaars, UI/UX-ontwerpers, frontendteams en projecten die hoogwaardige glassmorphism-effecten nodig hebben.

Belangrijkste voordelen

• Ingebouwde glaseffecten zonder handmatige CSS
• GPU-versnelde realtime rendering
• Hoogwaardige componenten geïnspireerd op Apples ontwerpsysteem
• Minimale CSS-bundelgrootte
• Volledige TypeScript-ondersteuning