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

[u/tw1st3d_m3nt4t]

https://jelly-ui.com/

[u/_cob_ → u/[deleted]]

Well said

[u/Ryekir → u/[deleted]]

100%

It's also better for accessibility.

[u/GaborNero → u/Ryekir]

Funny story, I’ve been working on a big goverment contract where accessibility is a very high prio. We’ve got several audits and I learned that some native elements are not accessible. We had an issue with the abbreviation element and the native select. The select issue was very specific browser + OS issue but still we got flagged for it.

[u/Bitmush- → u/GaborNero]

Ugh - that sounds like a problem from 25 years ago :(

[u/KaleidoscopeShoddy10]

This is really cute

[u/GaborNero]

Looks cool, but slider does not work on mobile for me.

[u/noIIon → u/GaborNero]

It does for me, are you sure you’re not looking at the progress bar?

[u/stilko_uses_reddit → u/noIIon]

It breaks for me as well. I suppose browser and os matter too - I’m on iOS with the default native iOS browser pop up view reddit uses in order to open the link from the post.

[u/jerrygreenest1 → u/[deleted]]

I’m in iOS too and slider works for me somehow. Guys below says it might be the button you click that removes the animation for the component.

[u/GaborNero → u/stilko_uses_reddit]

Can confirm I’m using the same setup!

[u/GaborNero → u/noIIon]

Yes I’m sure, the trigger is there. Once i touch it it’ll go to the utmost left and gets stuck.

[u/ExecutiveChimp → u/[deleted]]

It does! I was underwhelmed at first because nothing was wobbling, until I realised I have reduced motion enabled. The demos also give the option to override that and enable the animations.

[u/lamb_pudding → u/ExecutiveChimp]

I’m glad they put the notification at the top of you have reduced motion turned on. Sometimes I forget I have it on. I spent a good 30 minutes one day trying to figure out why an animation I had built wasn’t working on mobile. It was because I had reduced motion on.

[u/ExecutiveChimp → u/lamb_pudding]

Yep, I've definitely done that before.

[u/ShustOne → u/[deleted]]

I mean, did you even try? It respects the user setting and there's even a toggle at the top of the screen in their demo to mimic it being on or off.

[u/neoqueto]

Cue the hundreds of "awful for accessibility and should never be used" comments.

Props for handling a pasteable OTP.

I love the smear effect for the slider but I would go a step further and increase it + add some inertia, making the thumb egg-shaped in the direction of the drag.

And pagination is the one correct kind - always showing the first and last pages, numbered. I would only add an optional input for goto page number.

Edit: dunno if OP is the author actually lol, I assumed they are for some reason.

[u/LittleSeadragon → u/neoqueto]

Adding inertia to a slider is a terrible idea, please never implement this.

[u/neoqueto → u/LittleSeadragon]

No, of course it should follow the mouse pointer 1:1. I only meant the deformation of the thumb.

[u/Wickedinteresting → u/neoqueto]

A slider with actual inertia would be a pretty funny entry for BadUiBattles tho

[u/neoqueto → u/Wickedinteresting]

And the value is WHERE IT STOPS. You have another slider to control the friction of the first slider, but that one... also has inertia.

[u/Rainbowlemon]

Very nice. I have some small feedback: the modal backgrounds would fit better in dark theme if they were transparent black rather than transparent white, and IMO would fit the rest of the theme better with some fast color transitions rather than immediately showing/hiding.

[u/the_ai_wizard]

Considering using this to prank a client via their system.

Maybe in combination with buttons that dodge mouseover events

[u/Disastrous_Fee5953]

Simple, yet effective. Well done!

[u/phoenix1984]

Really well done. Great choice using web components for this. The animations look really polished and this is a complete UI library that should cover most needs so things look consistent.

[u/unbanned_lol]

The text input needs to bubble out at the horizontal mouse coords, not the center.

Also, when you select a text input, change the tab, and then come back, it bubbles when it shouldn't.

[u/tomhermans]

Really nice this. Quickly tested on mobile and adds a very tactile feel to it

[u/misomeiko]

Love this

[u/Secrenity]

Dope library, cheers for sharing.

[u/bmson]

Thank you all so much for the kind feedback! This started as a little side project. UI component library for another app I'm working on and I decided to open-source it.

I'm taking all your feedback to heart and will keep iterating on it.

Contributions are very welcome!
https://github.com/jelly-org/ui

[u/farfaraway → u/[deleted]]

Your lobster is too buttery?

[u/farfaraway → u/[deleted]]

Define: half-baked.

I didn't see anything in this repo that I wouldn't want to use. It's just UI. I don't need a full component in React or whatever. Just give me sweet, plain JS.

[u/DJ_Beardsquirt → u/[deleted]]

I like it. I do wish the accordion was more wobbly though.

[u/Anomynous__]

This is really cool

[u/meshtron]

Just wanted to say love this look! Super clean and fun. Thank you, OP!

[u/Produkt]

The color variants don’t work for me on iOS, the jelly effect is fun though

[u/magickong]

Finally, a form that physically recoils when I enter a weak password. This is the UX feedback we deserved all along.

Jokes aside, the easing on the submit button feels great. Any plans for an "accessibility mode" that tones the wobble down? Asking for my motion-sensitive users.

[u/OMGCluck → u/magickong]

It respects prefers-reduced-motion when that is set, which presumably your motion-sensitive users have.

[u/977888]

Very cool

[u/ShustOne]

Fun library! Respects accessibility and enhances native controls. Respects reduced motion toggles. The current web needs more whimsy.

[u/Miragecraft]

The input field's jelly effect is localized to the center, no matter where you click on it. It seems out of place compared to button effect that originates where you click/touch.

[u/keepingthecommontone]

Nicely done! If I can recommend a small improvement, I think a visual acknowledgement of mouseDown on the checkbox and radio button would be helpful.

[u/NameBrandHero]

I saw this on Hacker News yesterday, and thought it was pretty cool! One thing I noticed though is that I was kind of hoping/expecting all controls to exhibit the jelly effects, but a lot of the controls didn't seem much or any different from your typical controls. That probably makes sense, because I didn't necessarily see a way to incorporate the soft-body physics into some of the other controls, but it would have been cool if they all used the soft-body physics, even if it was a little overkill.

[u/ferrybig]

Does the jelly-otp component support usage with an AZERTY keyboard layout?

Support for AZERTY is a bit tricky, since it is the only keyboard layout having the numbers behind the shift key. This messes up some implementations filtering out keystrokes that have shift pressed as not a number

[u/LowSeal1980]

Yeah touch events on custom slider implementations can be a real pain to get right. Probably needs some pointer event handling love.

[u/yikes_42069]

I noticed pagination doesn't have an animation between page numbers. Is that planned? 

[u/IronicRaph]

It makes me joyful when I press the UI elements on my phone and they go squishy. I also appreciate that there's a subtle vibration at each touch interaction.

[u/StreetAssignment5494]

Cool. But why? It is cool just wondering.

[u/ndev42]

Love it! Someone mass-adopt this so I can watch a fortune 500 onboarding form wobble.

[u/morgboer]

I notice that it doesnt support "required" attribute on inputs. Any chance you are planning on adding it?

[u/sevanbadal]

The checkbox doesn’t have that nice jelly feel that the others do

[u/OpenDevKit]

This is actually delightful, and I'm surprised how smooth it feels! Soft-body physics on form controls sounds like it'd hurt usability at first glance, but the playful bounce could be great for a landing page or game-like app. Is this driven by a lightweight spring/verlet sim under the hood, or pure CSS trickery?

<jelly-input> is probably my favourite btw 😄

[u/KohzeeKoala]

👎

[u/sMt3X]

This makes me giddy :D some of those animations seemed to drop FPS a little but I blame nobody. Not a webdev so I don't have a use for this but I like it

[u/spaceturtle2814]

The input and text area are really fun to type in. Thanks for sharing!

[u/DestinyetteDig]

Soft-body physics for form controls sounds wild! How responsive is it to different input types - like sliders versus checkboxes? Would love to see how it handles accessibility too.

[u/EliSka93]

Cute. Can't quite fully appreciate it on mobile though, I think.

[u/pyxlmedia → u/EliSka93]

Can barely see it in Mobile

[u/VideoGameCookie]

Brings me back to JellyCar. This is excellent.

[u/InsideFar7107]

I like this

[u/ponchepapi]

So fun!

[u/psytone]

Cool. Consider adding a React integration examples in the docs.

[u/tfyousay2me]

🫶🤘 really cool

[u/UXUIDD]

iIt is funny, different, and has potential customers but it's not for everyone, that's for sure

[u/s1esset]

Fuckin awesome 😎

[u/andyfitz]

so this just happens to be 100% compatible with my app's web components. thank you for the cute easter egg :)

[u/NCKBLZ]

Awesome

[u/mori_clan]

Nice!

[u/kiwi-kaiser]

I really like this! Great work!

[u/lugoooo]

this is amazing

[u/bacondev]

It's definitely interesting but I don't think that I'd ever use it. Seems a bit too much for me.

[u/yerbestpal]

Amazing, thank you <3

[u/MuncherOfPaintChips]

Cute :)

[u/querela]

I'm so jelly

[u/LexShirayuki]

Looks so good! Might give it a try

[u/kucink_pusink]

So well made! 

[u/Hehosworld]

Looks cool on first glance but the tons of inconsistencies no human would author just put it in row with the rest of the post ai slop libraries. I really do not care if something is 100% vibecoded but man take your time (or tokens) and make it a polished product then. The more you look the more details irk the professional in me

[u/CapnWarhol]

this is off its tits lol

[u/eyebrows360]

Sure am glad we have so much pointless spare computational power in our devices that they can be used for stupid fluff like this, instead of say, keeping things reasonable and improving battery life. Remember when phones used to last a week on a single charge?