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

an0malous

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.

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.

nerdsniper

I'm having trouble identifying any physics at all in this UI design system.

serf

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.

cynicalsecurity

Absolute bliss.

sebnado

love it I can think of many projects that could use that

xnx

No apparent relation to the jelly slider: https://docs.swmansion.com/TypeGPU/examples/#example=renderi...

weego

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.

xutopia

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.

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.

chuckadams

Gotta say, I like most of the effects except for the wiggly "membrane" on inputs and buttons: I'd prefer to see the the whole thing jiggle when clicked or focused, rather than a small circle, and to turn off the effect entirely for typing. I suppose it's trivial enough to go into the source, but if there's a cheap and easy way to expose customization knobs like that, perhaps take it as a suggestion.

ILearnAsIGo

It does not seem to work on Firefox for iOS. I could not see any animation just the tiny click registration cards.

victorbjorklund

Pretty cool. Love the button. Not sure I will ever build an app where this makes sense but cool

claytongulick

I love the aesthetic, and I really love that they implemented it as a web component library.

JLCarveth

So this works on Chrome on my Android phone, but not on Chrome desktop nor firefox.

NetOpWibby

This is perfect for gaming sites like Splatoon and Roblox.

chrismorgan

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.

rickydroll

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.

FrustratedMonky

? what am I missing? The demo is just rounded corners? do we need a special library for that?

flowerbreeze

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.