Jelly UI: Soft-Body Physics for HTML Form Controls

Overview of Jelly UI

Jelly UI is a design system that applies soft-body physics to native HTML form controls, allowing elements like buttons, checkboxes, and sliders to deform and bounce elastically upon interaction. The library aims to transform static web inputs into tactile, dynamic components that behave like physical jelly.

Technical Implementation and Performance

Animation Loop and Rendering

Jelly UI utilizes a requestAnimationFrame (RAF) loop to handle its physics calculations. Technical analysis of the library reveals that the "JellyEngine" recalculates the state for every active component on the page every frame (approximately every 8ms), regardless of whether a pointer event is currently occurring. This approach causes the entire document to repaint frequently, which can lead to noticeable lag on some systems.

Accessibility and Motion Preferences

The library includes support for the @media (prefers-reduced-motion: reduce) media query, allowing the animations to be disabled for users who have requested reduced motion at the system level. However, users have noted that the demo site lacks a manual toggle to override these settings or alert users when animations are disabled.

UX and Usability Analysis

Interaction Model and Consistency

While the elastic effects provide a unique aesthetic, they introduce inconsistencies with standard UX patterns. Specifically, the interaction registration varies across components; for example, clicking and dragging a mouse away from a button before releasing may still register as a click, whereas the same action on a checkbox does not.

Input Latency and Precision

Users have reported significant input lag in specific controls, particularly the slider. The soft-body physics cause the slider handle to lag behind the mouse cursor during dragging, which deviates from the expected "glue-like" attachment of a slider to the pointer.

Accessibility Concerns

Beyond motion preferences, some users have identified issues with visual accessibility:

• Color Contrast: Certain color combinations (e.g., red and amber) may be indistinguishable for users with specific types of color blindness, making it difficult to determine if a button has been activated.
• Motor Control: Some users suggest that the deformable nature of the UI could be adapted to help those with limited fine motor control by increasing the effective click zone or changing target shapes to improve accessibility.

Demo Site Critique

Scroll-Snap and "Scrolljacking"

The Jelly UI demo page employs scroll-snap, which has been widely criticized by users as a form of "scrolljacking." Critics argue that this implementation creates a clunky experience, particularly on macOS/Opera, where velocity scrolling feels broken and concurrent scroll events are locked until animations complete.

Browser Compatibility

Reports indicate that the animations may not function correctly on Firefox for iOS, where users see only the click registration cards without the accompanying soft-body deformations.

Community Perspectives

Community feedback is polarized between those who view the library as a creative experiment and those who find it distracting or counter-intuitive for professional web applications.

"Cute... and I appreciate that it appears to gracefully degrade for @media (prefers-reduced-motion: reduce), but for the demo site, it would probably be a good idea to allow the user to override that without having to change their system settings."

"I love this, but it does not seem to conform to standard UX best practices... the button registers a click, the checkbox does not."

"This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy' [referring to the RAF loop]."

While some argue the effects are overdone and distracting, others suggest the library would be a perfect fit for game interfaces or highly stylized, experimental websites.