Liquid Gooey heißt eine neue quelloffene Bibliothek, die den sogenannten Gooey-Effekt für React-Oberflächen liefert. Der Reiz dahinter: Zwei Menüpunkte, zwei Buttons oder ein wanderndes Element verschmelzen und trennen sich wie zähflüssiges Gel. Bisher scheiterte dieser Look zuverlässig an Safari.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Das Wichtigste in Kürze
- Liquid Gooey verpackt den Gooey-Effekt in zwei fertige React-Komponenten: Morph zum Verschmelzen, Move für flüssige Schleifspuren.
- Die Bibliothek steht unter der MIT-Lizenz, kostet nichts und bringt außer React keine Laufzeit-Abhängigkeiten mit.
- Anders als beim klassischen SVG-Filter soll der Effekt auch in Safari laufen und dabei echte Schatten behalten.
- Für DACH-Agenturen zählt vor allem die Pflicht, solche Animationen barrierefrei nach BFSG abzusichern.
Was steckt in Liquid Gooey?
Liquid Gooey besteht aus zwei Bausteinen. Morph lässt berührende Elemente verschmelzen, ihre Form gallertartig ändern und beim Auseinanderziehen wieder abreißen. Move zieht einem bewegten Element eine flüssige Gummispur hinterher. Beides binden Sie ein, indem Sie Ihre Oberfläche in einen Liquid-Container legen und die Positionen der einzelnen Elemente animieren.
Installiert wird die Bibliothek über npm als Paket liquid-gooey. Sie steht unter der MIT-Lizenz, kostet nichts und verlangt außer React ab Version 18 keine weiteren Abhängigkeiten. Das Sammel-Repo mit dem verwandten Border-Beam-Effekt zählt rund 1.900 Sterne auf GitHub.[1]
Warum bricht der Effekt sonst in Safari?
Der Gooey-Effekt selbst ist kein neuer Einfall. Der Entwickler Lucas Bebber machte ihn schon 2015 populär, mit einem SVG-Filter aus zwei Schritten: Ein feGaussianBlur verwischt die überlappenden Formen zu einer Wolke, ein feColorMatrix zieht den Alphakanal danach so hart zusammen, dass aus der Wolke wieder eine scharfe, verschmolzene Silhouette wird.[2]
Der Haken sitzt im zweiten Schritt. Den Alpha-Trick des feColorMatrix setzen Safari und Firefox auf DOM-Elementen nur unzuverlässig um. Statt zu verschmelzen, bleibt dort oft eine simple Unschärfe übrig. Liquid Gooey umgeht das Problem, indem die Bibliothek eine SVG-Silhouetten-Ebene von einer scharfen Inhalts-Ebene trennt. So bleiben echte Schatten erhalten. Auch in Safari soll der Effekt sauber rendern.
Der Gooey-Effekt war zehn Jahre lang eine Spielerei für Chrome. Erst wenn ein Effekt zuverlässig in Safari läuft, wird aus der Demo ein Werkzeug für den Kundenauftrag.
— Markus Seyfferth, Chefredakteur Dr. Web
Was bringt der Effekt DACH-Agenturen?
Für Freelancer und Agenturen ist Liquid Gooey vor allem eine günstige Abkürzung. Der Effekt gibt Ladeanimationen, Menüs oder Hero-Bereichen Persönlichkeit, ohne dass Sie den fummeligen Filter selbst bauen. Für den Apple-Look bietet die quelloffene Bibliothek liquid-glass-react eine verwandte Alternative, die allerdings Brechung und Milchglas nachbildet statt organischer Verschmelzung.[3] Der Trend zu solchen Frontend-Werkzeugen hält an, vom KI-Animationseditor Motionly bis zur selbst gehosteten Figma-Alternative Penpot.
Zwei Dinge gehören trotzdem auf die Prüfliste. Die Barrierefreiheit steht vorn: Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz, und bewegte Effekte müssen die Einstellung prefers-reduced-motion respektieren sowie den Kontrastwert von 3:1 aus WCAG 2.1 halten. Dazu kommt die Leistung, denn SVG-Filter kosten Rechenzeit und lassen schwache Geräte ruckeln, was die Core Web Vitals drückt. Vieles davon wandert ohnehin ins native CSS, vom Masonry-Layout der CSS Grid Lanes bis zu frei definierbaren Formen per CSS shape(). Setzen Sie den Effekt also sparsam und gezielt ein.
Wie der Gooey-Filter arbeitet
Quellen
[1] Jakub Antalik: „Liquid Gooey“ (GitHub-Repository „Libraries“)
[2] CSS-Tricks: „The Gooey Effect“
[3] rdev: „liquid-glass-react“ (GitHub-Repository)
