Jelly UI: Soft-Body Physics for Native HTML Form Controls
I built Jelly UI, a dependency-free Web Components library that brings soft-body physics to native HTML form controls. With 40 custom elements, it offers tactile, squishy interactions for buttons, sliders, and inputs while maintaining full WCAG AA accessibility, dark mode support, and RTL compatibility. Just one script tag transforms your interface into a playful, responsive experience.
Real form controls meet soft-body physics.
- jlukic
Saw the window was a bit laggy so thought I'd delve deeper to figure out what was going on.
This lib runs a a RAF animation loop every 8ms across every component on the page that causes the entire document to repaint.
The comment above appears of the AI generated sort:
// One shared animation frame: step every live component, park when idle.
// The delta is capped so a background-tab pause never becomes one giant step.
The "JellyEngine" instead of just calculating the jelly animation on pointer events is recalculating for every active component on the page every frame.
This is the kind of thing usually a human notices and says 'dont do that, that is kind of crazy'.
- TurkTurkleton
Cute (and I mean that sincerely, not sarcastically), 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, or at least alert them that they won't see the animations.
- orliesaurus
If I were younger I would love this. nowadays I spend most of the time tweaking websites to remove this stuff using local stylesheets...or using dark + read mode... how times have changed.
- itishappy
I love this, but it does not seem to conform to standard UX best practices.
If I click and hold then move the mouse away to release, I assume an element should not register that as a click. As-is, this is inconsistent: the button registers a click, the checkbox does not.
- jszymborski
This comment is for like three people on HN, but anybody remember when Paul Neave had a website/blog/showcase (c.2007-2010ish?) where the borders of the page had similar jelly effect? That was achieved with Flash back in the day.
Neave was a personal hero of mine back then... hope you're well if you're reading this!
- ChiperSoft
So the _only_ way to use this is by loading the file from their domain? There is no download or package install? Absolutely no recommended mechanism for hosting it yourself?
This is a security nightmare.
- gloosx
I don't fully understand the "soft-body physics" part. What's that supposed to mean? Looks like a generic UI library, not a really good one.
opacity: 0.5 for disabled elements is a crime.
pointer-events: none on disabled elements and claiming WCAG AA compliance? Ew.
- JoshTriplett
It's cute. But the reaction time on some of the controls is so awful. If I click and drag the slider control back and forth, it lags behind the mouse cursor substantially. It should feel like it's stuck to the mouse cursor like glue.
By contrast, most of the other controls do seem to stick to the cursor, such as jelly-resizable.
Also, the "Placeholder" control seems to fail to actually make the placeholder disappear when clicked in.