Liquid Glass UI

Wichtige Funktionen

Liquid Glass UI ist eine React-Komponentenbibliothek, die vom visionOS-Designsystem von Apple inspiriert ist.

• Liquid-Glass-Effekt-Komponenten: Karten, Buttons, Navigation, Eingabefelder, Modals und mehr mit transluzenten Materialien und dynamischer Hintergrundunschärfe.
• Echtzeit-Rendering: GPU-beschleunigte Hintergrundfilter und dynamisches Farb-Sampling passen die Glaseffekte in Echtzeit an den umgebenden Inhalt an.
• Spekulare Highlights: Interaktive Lichtreflexionen reagieren auf Nutzereingaben und bewegen sich wie bei echtem Glas über die Oberflächen.
• Flüssiges Bewegungssystem: Apples charakteristische Easing-Kurven und physikbasierte Bewegungen sorgen für organische Interaktionen.

Technische Merkmale

• Alle Effekte laufen auf der GPU und ermöglichen 60-fps-Animationen sowie eine effiziente Akkunutzung.
• Kein JavaScript-Runtime: Alle Effekte sind in CSS implementiert, ohne JS-Runtime-Overhead.
• Responsive Mobile-First-Architektur für alle Bildschirmgrößen und Geräte.
• Barrierefreiheit im Mittelpunkt: Unterstützung für Screenreader, Tastaturnavigation und reduzierte Bewegungen; WCAG 2.1 AA-konform.
• Vollständige TypeScript-Definitionen und Kompatibilität mit React 18+.

Installation und Verwendung

# Über npm installieren
npm install liquid-glass-ui

# Oder Komponenten kopieren
git clone liquid-glass-ui

Verwendungsbeispiel:

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

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

Browserunterstützung

Funktioniert in modernen Browsern: Chrome 76+, Firefox 72+, Safari 14+, iOS Safari 14+ und Chrome für Android 76+. Auf älteren Browsern werden die Funktionen schrittweise reduziert.

Anpassung

Umfangreiche Anpassungen sind über CSS-Custom-Properties, Component-Props und Modifier-Klassen möglich. Passe Unschärfeintensität, Transparenz, Animationszeiten und Farbschemata an.

Zielgruppen

• React- und Next.js-Entwickler
• UI/UX-Designer
• Frontend-Teams mit Interesse an einem von Apple inspirierten Design
• Projekte mit Bedarf an leistungsstarken Glassmorphism-Effekten

Vorteile

• Integrierte Glaseffekte ohne manuelles CSS
• GPU-beschleunigtes Echtzeit-Rendering
• Hochwertige, von Apples Designsystem inspirierte Komponenten
• Kleine CSS-Bundlegröße
• Vollständige TypeScript-Unterstützung