Jelly UI: Soft-body physics for native HTML form controls

Original Article ↗ Hacker News Discussion ↗

A new “Jelly UI” library adds squishy, soft-body-style animations to standard HTML form controls, aiming to make buttons, sliders, and inputs feel playful and tactile. Commenters praise the creativity and reduced-motion support, but many criticize scroll-jacking, inconsistent interaction behavior, accessibility issues, and potential performance and battery costs from constant animations. Most see it as a fun fit for games, kids’ sites, or one-off effects rather than everyday production interfaces.

Overall reception & potential use cases

  • Many find the jelly effects delightful, cute, and creatively refreshing; some say it’s the first “fun” UI idea they’ve seen in years.
  • Others consider it overdone, distracting, nauseating, or “uncanny,” and hope it never appears in serious production apps.
  • Suggested niches: games, kid-focused sites, candy/ice-cream stores, playful AI interactions, early literacy apps, gaming UIs.
  • Several note that using it sparingly (single buttons, sliders, or special controls) might be tasteful; applying it everywhere would be garish.

Motion preferences & accessibility

  • The library respects prefers-reduced-motion, disabling animations. This confused many who initially saw only rounded controls and assumed it was broken.
  • Some appreciate strict adherence to system settings, especially those with visual sensitivities.
  • Others dislike global OS toggles being applied to demos, or had Reduce Motion on only to speed up OS animations; they want an in-page override.
  • The author later adds a notification and an override control.

Scroll behavior & interaction design

  • The demo used scroll snapping / scrolljacking, which many describe as jarring, breaking expected scrolling, causing overshooting and difficulty reading or using scrollbars.
  • Some liked the slide-like transitions and blamed browser behavior instead.
  • After sustained criticism, scroll snapping was removed.

“Soft-body physics” and effect design

  • Multiple commenters say the advertised “soft-body physics” isn’t obvious, especially with motion reduced; they see deformation but not convincing physical behavior.
  • Some criticize inconsistent interaction: click-and-drag sometimes deforms, sometimes not; click-up outside sometimes still activates, sometimes not (partially fixed later).
  • Requests include alternate deformation directions, hover effects, more 3D/lighting, and jelly effects that also influence text, not just outlines.

Performance & implementation concerns

  • There is debate over a requestAnimationFrame loop and whether it needlessly repaints the whole document vs. only active components.
  • Some argue this is wasteful on the web and bad for battery; others compare it to games and say drawing a few widgets per frame should be cheap.
  • Profiling suggests much of the cost may come from Lottie header/footer animations rather than the jelly engine itself, but this remains contentious.

Component UX, accessibility & compatibility

  • Detailed critiques target specific components: OTP inputs (multiple single-character fields), pagination, tabs, disclosure dialogs, switches, and menu interactions.
  • Concerns: small hit targets, gaps in clickable areas, poor keyboard behavior, disabled elements using low opacity and pointer-events: none despite WCAG claims.
  • Some report sluggish performance and broken or absent animations in Firefox (mobile and desktop) and on certain Chrome setups.
  • Others praise the use of web components and express interest in source code and bundling, noting the GitHub repo is hard to discover.