FARAZ
ENKontakt
Gratis

Liquid Glass on Your Website: the Full Tutorial

Ein Schritt-für-Schritt-Tutorial für Liquid-Glass-Bedienelemente im Apple-Stil im Web mit Glisse, einer Open-Source-React-Bibliothek, mit der fertigen Beispiel-App zum Selbststarten.

0 €

Gib deine E-Mail ein. Du bekommst einen 6-stelligen Code, dann startet der Download.

Node.js 20+ und npm, eine React-App (der Guide nutzt Vite). Kein Konto, kein API-Key. Den vollen Biege-Effekt zeigen Chromium-Browser; Safari und Firefox zeigen mattes Glas mit Lichtkante.

Was du bekommst

  • Setup Vite-+-React-App anlegen und Glisse mit einem Befehl installieren.
  • Backdrop Das eine Attribut, mit dem das Glas deinen Hintergrund in jedem Browser verbiegt.
  • Components Suchfeld, Segment-Umschalter, Slider, Schalter, Buttons, Tab-Leiste, eigene Glaskarten.
  • Tuning Vier CSS-Variablen für Biegung, Farbsaum, Mattierung und Lichtkante.
  • Example app Der fertige Code aus dem Guide, getestet mit npm run build.

In drei Schritten

  1. Entpacken und den Guide (PDF) öffnen. Oder direkt das Beispiel starten: npm install und npm run dev in example-app.
  2. Mit den sieben Schritten in deine eigene React-App einbauen.
  3. Oder INSTALL-WITH-CLAUDE.md in Claude Code einfügen und Schritt für Schritt zusammen bauen.

Fabian Faraz Farid · Alle Links