Jelly UI – Soft-Body-Physik-Effekte für native HTML-Formularsteuerelemente

 (jelly-ui.com)
2 Punkte von GN⁺ 14 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Jelly UI v1.1 ist eine abhängigkeitsfreie Web-Component-Bibliothek, die echte Formularsteuerelemente mit weichen Soft-Body-Physik-Effekten kombiniert und 40 Custom Elements bereitstellt
  • Die Installation erfolgt über ein einzelnes Modulskript; unterstützt werden Dark Mode, automatisches Verfolgen des Betriebssystem-Themes, Anpassung der Akzentfarbe sowie RTL-Layouts für Schreibrichtungen von rechts nach links
  • Buttons nutzen native <button>-Elemente, Slider ein verborgenes range-Input, um für Tastaturbedienung, Screenreader und Formularteilnahme die native Semantik zu erhalten
  • Auf verschiedene Elemente von Checkboxen und Eingabefeldern bis hin zu Toasts, Tabs und Dialogen werden taktile Animationen wie Eindrücken, Dehnen, Wellen und Zurückfedern angewendet
  • Mit integrierten WCAG-AA-Farb-Tokens und ARIA-Patterns lassen sich zugängliche Produktoberflächen gestalten, ohne auf weiche visuelle Effekte zu verzichten

Installation und Themes

  • Jelly UI ist ohne Abhängigkeiten nutzbar, mit 40 Custom Elements und nur einem <script type="module">-Tag 
    <script type="module" src="https://jelly-ui.com/package.js"></script>;

<jelly-theme mode="auto">
  <jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>
  • <jelly-theme> ist ein Theme-Provider, der Design-Tokens auf einen untergeordneten Teilbaum begrenzt anwendet
    • mode unterstützt auto, light und dark, um den Betriebssystemeinstellungen zu folgen oder ein bestimmtes Theme zu erzwingen
    • Mit accent kann die Akzentfarbe neu festgelegt werden
  • Gemeinsame Farbvarianten sind azure, rose, amber, mint, graphite, platinum und white; Größen sind meist small, medium und large

Buttons und Aktionselemente

  • <jelly-button> ist ein kapselartiger Button, der intern ein echtes natives <button> enthält und damit Tastatur und Screenreader unterstützt
    • Farbe und Größe, die Formen pill und square, Deaktivierung sowie Block-Layout lassen sich konfigurieren
  • <jelly-icon-button> ist ein quadratischer oder runder Button für ein einzelnes Icon
    • Über das Attribut label wird der für Screenreader erkennbare Name festgelegt

Formular-Eingabesteuerelemente

  • <jelly-checkbox> nimmt an Formularen teil, unterstützt checked und den unbestimmten Zustand (indeterminate), und das Jelly-Quadrat springt beim Zustandswechsel hoch
  • <jelly-input> ist ein einzeiliges Eingabefeld für text, email und password
    • Beim Fokussieren hebt sich die Oberfläche und ein Rand erscheint; bei jeder Eingabe breitet sich von der Caret-Position aus eine Welle aus
    • disabled und readonly werden unterstützt
  • <jelly-label> wird per for mit einem Steuerelement verknüpft
    • Beim Klicken fokussiert es das Ziel, der Label-Text wird zum zugänglichen Namen, außerdem lassen sich Pflichtstatus und Größe festlegen
  • <jelly-otp> ist ein Eingabeelement für Einmalcodes, das pro Ziffer ein Feld bereitstellt
    • Es verarbeitet Eingabe, Backspace, Pfeiltasten und Einfügen; Länge, Farbe, Größe und Deaktivierung lassen sich konfigurieren
  • <jelly-radio> bildet Gruppen mit Elementen, die im selben Root denselben name teilen
    • Unterstützt Navigation per Pfeiltasten mit roving tabindex und Berücksichtigung der Dokumentrichtung
  • <jelly-radio-group> ist ein beschrifteter radiogroup-Container für jelly-radio
    • Bietet Legende, horizontale oder vertikale Fluss-Layouts und Weitergabe der Größe an Kindelemente
  • <jelly-range> ist ein Doppelgriff-Slider zur Auswahl eines Bereichs zwischen Mindest- und Höchstwert
    • Auf beide Griffe werden role="slider", Fokus und ARIA angewendet; beim Ziehen werden die Jelly-Griffe eingedrückt
  • <jelly-segmented> ist eine kapselartige Spur mit sich gegenseitig ausschließenden Optionen
    • Die Auswahlmarkierung bewegt sich als kippende und sich dehnende Jelly-Pille zwischen den Segmenten
  • <jelly-select> ist ein formulargebundenes Dropdown, das die ARIA-Patterns combobox und listbox verwendet
    • Sowohl Trigger als auch Options-Panel bestehen aus Soft-Body-Oberflächen
    • Das Panel klappt aus dem Feld heraus auf und wechselt nach oben, wenn darunter nicht genug Platz ist
  • <jelly-slider> ist ein Slider zur Auswahl eines einzelnen Werts
    • Ein verborgenes natives range-Input übernimmt Semantik und Formularteilnahme; sichtbar ist ein eindrückbarer Jelly-Griff
  • <jelly-switch> ist ein ziehbarer Switch, dessen Griff sich wie ein Flüssigkeitstropfen dehnt und dessen Aus-/Ein-Farben ineinander übergehen
  • <jelly-textarea> wächst bei mehrzeiliger Eingabe automatisch zwischen Mindest- und Maximalhöhe
    • Auch die Oberfläche dehnt sich passend zur Höhe; bei Eingabe entsteht an der Caret-Position eine Welle, disabled und readonly werden unterstützt

Status und Feedback

  • <jelly-alert> ist ein Banner mit den vier Tönen info, success, warning und danger sowie optionalem Schließen-Button
  • <jelly-badge> ist ein kleines Element für Badges, Tags und Statusanzeigen, das beim Ändern des Textes hochspringt
    • Füllung oder Umriss, Pillen- oder Rechteckform sowie live- und instant-Verhalten lassen sich konfigurieren
  • <jelly-progress> ist eine Fortschrittsleiste, deren vorderer Füllbereich mit dem Fortschritt wackelt
    • Im unbestimmten Modus prallt ein Klumpen zwischen den beiden Wänden hin und her
  • <jelly-skeleton> ist ein Lade-Platzhalter, der statt zu schimmern sanft wie atmend schwingt
    • Unterstützt die Formen line, rect und circle
  • <jelly-spinner> bietet einen schleimartigen dots-Indikator, der sich zwischen drei Punkten bewegt, sowie einen blob-Indikator, der beim Rotieren seine Form verändert
  • <jelly-toaster> verwaltet Toast-Benachrichtigungen, die am Inline-Ende erscheinen und wieder verschwinden
    • Üblicherweise wird er über den Helper jellyToast('Saved!', { tone: 'success' }) aufgerufen
    • Wenn das platzierte Element position="bottom" erhält, wächst der Benachrichtigungs-Stack nach oben

Inhaltsoberflächen

  • <jelly-accordion> gruppiert mehrere <jelly-collapsible>-Elemente
    • Im single-Modus schließen die übrigen Elemente federnd, wenn eines geöffnet wird
  • <jelly-card> ist ein Jelly-Oberflächencontainer unterhalb von Inhalten
    • Mit squish wird er wie ein weiches Kissen eingedrückt und übernimmt eine Button-Rolle
  • <jelly-chip> kann als statisches Label, umschaltbarer Filter oder entfernbares Tag verwendet werden
    • Auswählbarkeit, ausgewählter Zustand, Entfernbarkeit und Deaktivierung lassen sich konfigurieren
  • <jelly-collapsible> ist ein Auf-/Zuklappbereich, dessen Panel über einen Header-Button federnd geöffnet und geschlossen wird
    • Es ist so aufgebaut, dass sich nicht der Text, sondern die Oberfläche bewegt
  • <jelly-divider> ist eine dünne horizontale, vertikale oder beschriftete Trennlinie
  • <jelly-kbd> ist eine Jelly-Tastenkappe, die man drücken kann
    • Wird sie über key mit einer echten Taste verbunden, senkt sich die Tastenkappe überall auf der Seite, solange diese Taste gedrückt wird

Navigation und Layout

  • <jelly-resizable> ist ein Panel-Grid, dessen Größe sich durch Ziehen der Jelly-Trennlinie oder per Tastatur anpassen lässt
    • Unterstützt die Richtungen row, vertical und both
  • <jelly-tabs> ist eine Tab-Ansicht mit echter tablist-Semantik
    • Die Auswahlmarkierung in Form einer Jelly-Pille bewegt sich, und Tab-Panels erscheinen federnd

Overlays

  • <jelly-dialog> ist ein modaler Dialog, der jellyartig federnd erscheint
    • Er sperrt die Seite und gibt den Fokus nach dem Schließen an die vorherige Position zurück
    • Schließen ist über Escape-Taste, Schließen-Button oder Hintergrundklick möglich
  • <jelly-drawer> ist ein Floating Sheet, das mit einem Feder-Effekt erscheint, bei dem es am Rand leicht überschießt und zurückkehrt
    • Es kann am Inline-Anfang, Inline-Ende oder von unten geöffnet werden
  • <jelly-popover> ist ein nicht-modales Panel, das per Klick geöffnet wird
    • Es bleibt am Trigger verankert und schließt per Escape-Taste oder Klick außerhalb
    • Unterstützt die Platzierungen top, bottom, start und end
  • <jelly-tooltip> zeigt beim Darüberfahren mit der Maus oder bei Tastaturfokus eine thematisierte Sprechblase über dem Trigger an
    • Unterstützt vier Platzierungsrichtungen und drei Größen

Verwandte Beiträge

1 Kommentare

 
GN⁺ 14 시간 전
Meinungen auf Hacker News

  • Das Fenster ruckelte etwas, also habe ich nach der Ursache gesucht: Diese Bibliothek führt über alle Komponenten der Seite hinweg alle 8 ms eine requestAnimationFrame(RAF)-Animationsschleife aus und veranlasst ein Neuzeichnen des gesamten Dokuments.
    Auch der obige Kommentar „aktive Komponenten in einem Frame gemeinsam verarbeiten und im Leerlauf stoppen“ wirkt wie von einer KI generiert. JellyEngine berechnet die Jelly-Animation nicht nur dann, wenn Pointer-Events auftreten, sondern berechnet alle aktiven Komponenten der Seite in jedem Frame neu. Eine Implementierung, bei der die meisten sagen würden: „So sollte man das nicht machen, das ist viel zu viel.“

    • Ein Performance-Profiling in Chrome stützte diese Beschreibung nicht. Die Schleife scheint die zu aktualisierenden Komponenten in einem aktiven Set() zu verwalten und sie zu entfernen, sobald die Bewegung stoppt.
      Ich stimme zu, dass die Kommentare etwas nach oberflächlich von KI generiert klingen, aber am Ansatz selbst konnte ich kein offensichtliches Problem finden; wenn nichts passiert, ist die Kernschleife in wenigen Mikrosekunden beendet.
    • Das ist kein übertriebener Ansatz. 99,99 % der Videospiele funktionieren buchstäblich genau so und zeichnen den gesamten Bildschirm kontinuierlich neu, solange die vertikale Synchronisationsrate oder die Hardwareleistung es zulässt.

  • Gefällt mir, scheint aber nicht zu üblichen UX-Standards zu passen.
    Wenn man gedrückt hält und die Maus aus dem Element herausbewegt, sollte das meiner Meinung nach nicht als Klick gewertet werden. Derzeit wird es bei Buttons als Klick behandelt, bei Checkboxen aber nicht, was inkonsistent ist.

    • Das war ein Problem, das wir bei der Arbeit mit Flash-Entwicklern ständig hatten. Die Regel „Wenn du nicht alle Funktionen einer Scrollbar implementieren kannst, dann implementiere die Scrollbar nicht neu“ war verbreitet, aber am Ende haben wir sie doch mehr als fünfmal nachgebessert und jeweils Tage damit verbracht.
    • Guter Fund, daher wurde die Button-Logik angepasst; jetzt wird kein Klick ausgelöst, wenn sich der Cursor außerhalb der Button-Grenzen befindet.

  • Wirklich niedlich, und mir gefällt auch, dass die Funktion bei @media (prefers-reduced-motion: reduce) elegant reduziert wird.
    Auf der Demo-Website wäre es allerdings gut, wenn Nutzer das ohne Änderung der Systemeinstellungen überschreiben könnten, oder wenn es zumindest einen Hinweis gibt, dass Animationen nicht angezeigt werden.

    • Ich hatte übersehen, dass die Bewegung absichtlich reduziert wird, und dachte, es sei kaputt. Ich hatte sogar vergessen, dass ich diese Einstellung früher aktiviert hatte.
    • Apple-Menü > Systemeinstellungen > Bedienungshilfen > Bewegung, dort kann man Bewegung reduzieren einstellen.
      Jedes Mal, wenn so eine schöne Demo auftaucht, brauche ich kurz, bis mir diese Einstellung wieder einfällt; bis dahin klicke ich enttäuscht herum und denke: „Was soll daran besonders sein?“
    • Jetzt wird ein Hinweis angezeigt, und über ein hübsches Hasen-Icon kann man die Systemeinstellung auch überschreiben.

  • Als ich jünger war, hätte ich das wirklich geliebt, aber heutzutage verbringe ich mehr Zeit damit, solche Effekte per lokalem Stylesheet zu entfernen oder Dark Mode und Lesemodus zu verwenden. Die Zeiten haben sich sehr verändert.

    • Mir gefällt Animation als Feedback, das hervorhebt, was gerade passiert oder sich ändert. Native Komponenten vermitteln das nicht immer gut, und richtig eingesetzte Animation ist nicht bloße Dekoration, sondern hat echten UX-Wert.
    • Etwa einmal im Jahr wünsche ich mir wieder mehr Spaß in Software, nur um kurz darauf wieder nur zu hoffen, dass sie mich einfach nicht stört.

  • Es wäre schön, wenn der Effekt auch beim Hover in schwächerer Form auftritt. Einige Controls wie Fortschrittsbalken und Toasts scheinen keinen Jelly-Effekt zu haben.
    Die Performance der Demo-Seite ist auch nicht besonders gut und es fühlt sich an, als würde sie das Scrollen kapern, aber insgesamt ist es niedlich und dürfte gut zu Game-UIs passen.

  • Das Chip-Element sollte an Ort und Stelle bleiben und dort wechseln; wenn man darauf klickt, bewegt es sich über seine Grenzen hinaus, was mir nicht gefällt.

  • Niedlich, aber bei einigen Controls ist die Reaktionsgeschwindigkeit viel zu schlecht. Wenn man den Slider hin und her zieht, hängt er dem Mauszeiger deutlich hinterher; er sollte dem Cursor folgen, als wäre er daran festgeklebt.
    Andere Controls wie jelly-resizable bleiben dagegen gut am Cursor. Beim "Placeholder"-Control scheint der Platzhalter beim Klicken nicht zu verschwinden.

  • Ich frage mich, ob sich jemand daran erinnert, dass es etwa 2007–2010 auf Paul Neaves Website, Blog oder Showcase einen ähnlichen Jelly-Effekt an den Seitenrändern gab. Damals war das in Flash umgesetzt.
    Paul Neave war damals ein persönlicher Held für mich; falls er das hier liest, hoffe ich, dass es ihm gut geht.

  • In diesem UI-Designsystem finde ich kaum etwas, das man als Physik-Effekt bezeichnen könnte.

    • Diese Bibliothek respektiert die Einstellung des Clients zur Bewegungsreduzierung und deaktiviert alle Animationseffekte.

  • Es könnte an meiner Art der Farbfehlsichtigkeit oder an den Monitoreinstellungen liegen, aber Rot und Amber waren sich so ähnlich, dass ich nicht einmal erkennen konnte, ob ich den Button gedrückt hatte.