Der Entwickler Baldvin Mar Smarason bietet mit Jelly UI eine Web-Components-Bibliothek an, deren Buttons, Schalter und Schieberegler beim Klicken wie Gelee nachfedern.[1] Die Bibliothek steht unter MIT-Lizenz und braucht keine weiteren Pakete.[2]
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenInhalt 4 Abschnitte
Sie umfasst 40 Custom Elements, von Formularfeldern über Dialoge bis zu Menüs, und lässt sich mit einem einzigen Script-Tag laden.[1] Das Repository besteht seit dem 15. Juli, aktuell ist Version 1.1.[2]
Das Wichtigste in Kürze
- Die Flächen werden auf einem Canvas gezeichnet und per Federphysik verformt, die Bedienung läuft über echte Formularelemente.
- Laut README erfüllen die Farbwerte WCAG AA, bei reduzierter Bewegung entfällt das Wackeln.
- Das Bundle ist rund 319 KB groß, gzip-komprimiert etwa 72 KB (eigene Messung).
- Auf npm trägt ein ganz anderes, altes Paket den Namen „jelly-ui“, Sie bauen die Bibliothek selbst.
Wie entsteht der Wackeleffekt?
Jede Komponente besitzt einen Ring aus federgekoppelten Punkten, der auf einem Canvas wie eine Membran schwingt. Eine gemeinsame Animationsschleife rechnet alle Körper und pausiert, sobald alles ruht.
Die Physik steckt in einem Objekt namens JellyBody: ein geschlossener Ring um ein abgerundetes Rechteck, dessen Druckausgleich das Volumen erhält. Ein einziger requestAnimationFrame-Durchlauf rechnet in festen Zeitschritten und hält an, wenn nichts mehr schwingt. Eine ruhende Seite kostet laut Projekt deshalb nichts.[2]
Das unterscheidet Jelly UI von CSS-Übergängen, die nur Werte zwischen zwei Zuständen interpolieren. Entscheidend ist die Trennung von Optik und Bedienung: Der Effekt liegt auf den Pixeln, die Elemente selbst sind nativ fokussierbar und nehmen über ElementInternals an FormData teil. Für Auswahllisten, Tabs, Menüs und modale Dialoge nennt das README die passenden ARIA-Muster samt Fokus-Rückgabe.[2]
Was liefert die Bibliothek im Alltag?
40 Elemente decken Formulare, Rückmeldungen, Navigation und Overlays ab. Dunkelmodus, Rechts-nach-links-Schrift und ein Token-System für Farben sind eingebaut.
Alle Farben laufen über CSS-Variablen mit dem Präfix --jelly-color-. Sieben Varianten von „white“ bis „graphite“ passen sich dem Dunkelmodus an, mode="auto" folgt dem System, eine Akzentfarbe setzen Sie per Attribut.[2]
Das Repository enthält 40 Testdateien, die in einem echten Chromium laufen. Unterstützt werden laut README die aktuellen Versionen von Chrome, Edge, Safari und Firefox.[2]
Eckdaten, Stand 8. November 2026
Zeitstrahl und Reifegrad
Ein Button darf wackeln, solange er sich per Tastatur genauso zuverlässig bedienen lässt wie ein normaler.
Michael Dobler, Herausgeber Dr. Web
Wo liegen die Grenzen für den Einsatz?
Das Projekt ist jung und hängt an einem Entwickler. Auch die Einbindung ist nicht selbstverständlich: Per npm erhalten Sie ein anderes Paket.
Das Repository zählt 266 Sterne und sieben Commits, fünf von Smarason, zwei von GitHub Copilot, der letzte stammt vom 30. September.[3] Als Pflegerisiko sollten Agenturen das einpreisen, bevor sie Kunden eine Bibliothek mit nur einem Maintainer zusagen.
Das README zeigt das Script von jelly-ui.com, die Seite liegt bei GitHub Pages. Für Kundenprojekte gilt wie bei Webfonts: selbst hosten, damit beim Seitenaufruf keine Anfrage an einen Dritten geht. Dazu klonen Sie das Repository und bauen mit npm run build die Datei dist/jelly.js. Unter dem Namen „jelly-ui“ liegt auf npm dagegen ein Paket in Version 0.0.1 mit Vue als Abhängigkeit.[4]
Als Alternative bietet sich Web Awesome an. Dort stehen Komponenten wie Combobox, Datumsfelder und Diagramme laut Dokumentation nur in der Pro-Stufe bereit.[5] Jelly UI ist frei, kennt aber keine Datumsauswahl. Wie Bibliotheken bei der Ladezeit abschneiden, zeigte zuletzt Den Odells Messung von zehn Designsystemen, und Webkomponenten mit Effekt gibt es auch bei amazing-glass.
Für Prototypen, Kampagnenseiten und Portfolios eignet sich Jelly UI. Testen Sie vorher Tastaturbedienung und Screenreader selbst, denn die Aussagen zur Barrierefreiheit stammen vom Entwickler.
Quellen
5 Quellen anzeigenQuellen ausblenden
- Jelly UI: Soft Web Components (Projektseite, Abruf)
- GitHubjelly-org/ui (README, package.json, Stand 8. November 2026)
- GitHubCommit-Verlauf von jelly-org/ui (Abruf)
- npmPaket „jelly-ui“, Version 0.0.1 (Abruf)
- Web AwesomeDokumentation mit Pro-Kennzeichnung (Abruf)
Mehr Newshunger?
- Designsysteme sollten von Haus aus schnell sein: Den Odell misst zehn Bibliotheken
- amazing-glass: Liquid-Glass-Webkomponenten mit echter Lichtbrechung für HTML, React und Vue
- Auswahlfelder sollten etwas verraten: Fünf Muster für gestaltbare Dropdowns in Chrome und Safari
- Desigma: Kostenlose Figma-Alternative in Rust läuft offline und ohne Konto
- Figma-Bibliothek aus dem Code bauen: Workflow mit MCP
- KI-Slop: So befreien Sie ihr Webdesign vom Einheitslook
