alt Hacker NewsJelly UI: Soft-body physics for native HTML form controls
Comments
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.
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.
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.
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!
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.
I'm having trouble identifying any physics at all in this UI design system.
I think it would be nice if the effect happened on hover as well, maybe to a lesser degree. Also, some of the controls don't appear to have any jelly in them, like the progress bar, toast, and so on. Finally, the performance on that showcase page isn't the best, and it feels like you're hijacking the scrolling somehow. But overall, it's cute. Would fit nicely as a game's UI.
I dont get why people are so mad at this? Looks fun, will I ever use it? Probably not, but it looks fun
Okay I know this is gonna sound rude but who in the world would want form controls that behave this way?
All I want is to be able to shake my phone and watch the UI jiggle.
Meta, but is there a good resource to find these types of HTML UI component frameworks? I have googled and searched but all I get a listicle-style pages that aren't very curated.
It could just be the particular type of my colour-blindness or my monitor settings, but the red and amber colours look so similar that I couldn't tell that I had even clicked the button.
- anyone mind explaining to a beginner what kind of algorithm is used to achieve this effect
- i can see it changes size on clicking and dragging
- so what is the author actually doing?
that's a real frustrating form of scrolljacking, a forced timed animation & lockout for concurrent scroll events until the timer is relinquished and input ceases; impressive.
Nice idea but I feel like it would work better with a non-flat or mildly-3D theme.
This could be modified to be very useful for folks with less-than-ideal hand ability. I don't have much fine motor control in my hands. Hitting one of the modern tiny targets usually involves clicking a few times around the target until I finally manage to randomly twitch the mouse into the right place. Something like this, where the target changes shape to improve targeting ability or increase the size of the click zone, would be wonderful.
I don’t like the Chip element it’s supposed to stay in place and toggle instead it goes out of bounds when clicked.
This is cool, but overdone to the point of distracting. Subtle effects can enhance usability but it should be barely noticeable.
Ew ew ew visceral uncanny valley reaction to the on/off control. I never made it to scrolling.
Is there an easy way to “reverse” the effects here? For example, on the “Jelly Button” I don’t want the part I press on to get bigger. I want it to get smaller and “inflate” the other parts of the controls that aren’t under my finger.
That demo makes me nauseous. Buttons shouldn't do that.
Just 25 years too late to be used to design Jelly World
It does not seem to work on Firefox for iOS. I could not see any animation just the tiny click registration cards.
No apparent relation to the jelly slider: https://docs.swmansion.com/TypeGPU/examples/#example=renderi...
I love it - stupidly creative - first time i see this yet it feels I always knew how it was meant to behave
then we wonder how are modern computers so slow?
I'm so glad it allows for preferences to reduce motion. I don't like these kinds of UIs at all... unless maybe I'm inside a video game and even then it bothers me after the initial novelty.
on chrome on a macbook pro page scrolling is noticeably degraded and animations are low fps. It's a very subtle effect which is nice i guess, but the feeling of jankiness overrides it.
I'm not sure I get why the slider lagging behind where the pointer that's dragging it is a good thing.
It's fun, but a menu would be so much better instead of the weird scroll-jacking. It takes a minute to get to the bottom of it.
Your scroll is messed up on my Macbook M3 Pro / Opera, it's like a broken "velocity scroll" that is too loose and scrolls past several items leading to a clunky experience
Pretty cool. Love the button. Not sure I will ever build an app where this makes sense but cool
So this works on Chrome on my Android phone, but not on Chrome desktop nor firefox.
This is perfect for gaming sites like Splatoon and Roblox.
This would be awesome if someone could add 3D rendering to make it actually look like I’m pressing a little jelly ball. It would make it so fun to press buttons that CA and EU would have to make jelly buttons illegal.
love it I can think of many projects that could use that
it'd be great if flutter had this
Stop scrolljacking me.
Some review of Jelly UI itself.
—⁂—
It requires JS to work, which could have been avoided at some arguable ergonomic cost. Personally I’d disqualify it from being considered “native HTML form controls”—it’d need to be just an enhancement to qualify in my mind.
—⁂—
Your sets of chips like mode auto/dark/light should be marked up and behave as radio buttons: when one is checked, it should be the only one in the tab order, and arrow keys and such cycle through them. <jelly-segmented> gets this right.
—⁂—
The demos show a “click” toast on buttons even if you move out of the button before releasing, which should cancel it. Either the event handler is linked to something other than activation (which should be fixed), or activation behaviour is wrong (which should be fixed).
—⁂—
> <jelly-checkbox indeterminate>
Oh how I wish <input type=checkbox> had an indeterminate attribute and a way of telling it to cycle through indeterminate when clicking. As it is, it’s purely a property, not attainable in serialised HTML.
—⁂—
> <jelly-otp>
I hate it. Do not under any circumstances use a sequence of single-character inputs for OTPs. It behaves really nastily. Sure, you made the simple paste case work, but all kinds of other normal interactions are busted. You must use one input. If you want to style it in a way that shows the intended length and puts characters in those boxes, you can still do it. Use `font-variant: tabular-nums` or `font-family: monospace`, then rely on the ch unit and probably add some letter-spacing (one of the very few legitimate cases for letter-spacing), and draw behind. Or, if you want more control… contenteditable is available.
—⁂—
> <jelly-range>
I thought we were talking “native HTML form controls”? There ain’t no such thing in HTML. (It becomes apparent the further I go that it’s not intended to be limited to what HTML has.)
—⁂—
> <jelly-switch>
There’s a gap in the hit target between the switch and the label. This needs to never happen. It didn’t seem to with checkboxes or radio buttons.
—⁂—
> <jelly-textarea>
Hold down a letter until it gives up expanding, and I found text and scrollbar drawn on top of the jelly border.
—⁂—
> <jelly-alert dismissable>
The × hit target is much too small.
—⁂—
> <jelly-pagination>
Not pleasant to use. Bad hit targets (too small, gaps between), poor choice of pages to offer (‹ 1 … prev self next … last ›: you want 2 instead of … if prev is 3, and you want more than one prev/next), and if it’s ever going to be interactive, the layout changes far too much.
—⁂—
> <jelly-tabs>
Ugh. Ugh. Unpleasant appearance, presenting tab bar and panel as unrelated widgets. Bad cross-fade (opacity drops below 1).
—⁂—
> <jelly-dialog>, <jelly-drawer>
Opening it in dark mode was very jarring: no transition, and the backdrop lightens (should darken; that may require changes to the dialog background colour).
—⁂—
> <jelly-menu>
You reused a <select> dropdown, and it shows. Interactions are all wrong. It also says “typeahead keyboard support” but I see no such thing.
? what am I missing? The demo is just rounded corners? do we need a special library for that?
I love the aesthetic, and I really love that they implemented it as a web component library.
Absolute bliss.
This is surprisingly delightful to play around with. We have to put some more fun into UIs, not the same type of AI-slop everywhere.
Waste of computing resources, and mildly distracting. This reminds me of compiz.
Terry Davis had a word for things like this.
Material Design engineers furiously prompting Gemini to copy it
Please never use scroll-snap as is done on this demo page (unrelated to the soft-body physics). It leads to an awful experience for a large fraction of users. It improves things in one or two scenarios, but at the cost of far more common great frustration.
Scroll-snap is a really risky feature, very niche in its reasonable applications. This is definitely not a suitable place to use it.
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'.