FluidGlass v3.7.1 · by Bellić Media

Interfaces.
Made fluid.

Eine Web-Component-Library für transparente Oberflächen, Refraction, Tiefe und Interaktionen, die sich nicht wie starre UI anfühlen.

Entdecken Nutzung anfragen
Die Highlights.

Nicht einfach Glas.
Ein Material für das Web.

FluidGlass verbindet klare Oberflächen mit Bewegung. Die Komponenten reagieren, federn, morphen und lassen den Inhalt darunter sichtbar bleiben.

Navigation, die sich wirklich bewegt.

Die aktive Fläche gleitet nicht nur. Sie verformt sich und reagiert auf die Bewegung zwischen den Tabs.

Glas bleibt Glas.

Transparenz, Lichtkanten und Inhalt unter der Oberfläche bleiben Teil des Materials.

Klar. Reaktiv. Der Hintergrund bleibt sichtbar und wird Teil der Oberfläche.

Kleine Bewegung. Große Wirkung.

Buttons reagieren federnd auf Klick und Drag, ohne dass sich das Interface schwer anfühlt.

Ein System. Nicht nur ein Effekt.

Navigation, Flächen, Buttons, Toggle und Hinweise teilen dieselbe visuelle Sprache.

Refraction.

Echte
Randbrechung.
Direkt im Glas.

Die gleiche mehrbandige Refraction-Idee wie in der Navigation sitzt jetzt an allen vier Kanten der Glasfläche. Der Hintergrund wird wirklich als gerenderte Szene gespiegelt und in den Randzonen optisch gestreckt.

Beste Darstellung am Desktop Auf PC oder Mac zeigt die Showcase-Seite die volle Refraction-Qualität und die aufwendigeren Animationen.
FLUIDGLASS OPTICS Der Hintergrund bleibt an derselben Stelle. Die Szene unter dem Glas und ihre Refraction teilen jetzt exakt dieselbe Geometrie. Nur die Randpixel werden optisch gebogen.
Interaktion.

Berühren. Ziehen. Loslassen.

Die Komponenten bekommen beim Scrollen ihren Auftritt. Danach bleiben sie echte, interaktive Web Components.

Button

Federnde Klick- und Drag-Bewegung.

Toggle

Materialwechsel zwischen fester Fläche und klarem Glas.

Glass Surface

Eigener HTML-Inhalt bleibt vollständig unter deiner Kontrolle.

Dein Inhalt. FluidGlass liefert Material und Bewegung. Der Inhalt bleibt normales HTML.
Für Entwickler.

Ein Script.
Dann HTML.

Die vollständige Library wird nur für freigegebene Projekte eingebunden. Dafür müssen sowohl der Zugriffstoken als auch die verwendende Domain freigeschaltet sein.

Komponenten

Die vollständige Library umfasst FluidGlass-Komponenten für Oberflächen, Interaktion und optische Randbrechung.

  • lg-glassGlass Container
  • lg-buttonButton
  • lg-toggleToggle
  • lg-navNavigation
  • lg-menuMorph Menu
  • lg-bannerBanner
  • lg-toastToast

Einbindung

Der öffentliche Showcase nutzt nur einen eingeschränkten, stark obfuskierten Demo-Build. Für echte Projekte wird die vollständige Library mit Token und freigeschalteter Domain bereitgestellt.

<script
  src="https://library.bellic-media.de/fluidglass/FluidGlass.js?token=DEIN_TOKEN"
  defer>
</script>

<lg-button text="Speichern"></lg-button>

<lg-glass width="320" height="160"
  radius="28" padding="24"
  refraction="true"
  refraction-strength="1.2"
  hover-light="false"
  drag>
  <h3>Eigener Inhalt</h3>
</lg-glass>

hover-light="false" deaktiviert nur das Mitwandern des Lichtreflexes beim Hover. Die eigentliche Rand-Refraction bleibt aktiv. Mit refraction="false" lässt sich die Optik vollständig abschalten.

FluidGlass für dein Projekt.

Nutzung der Library anfragen.

Du möchtest FluidGlass in einer Website oder Anwendung einsetzen? Schreib Bellić Media kurz, wofür du die Library verwenden möchtest.