8 ms·
Jelly UI: Soft-body physics for native HTML form controls
- petilon 3mo agoThis is cool, but overdone to the point of distracting. Subtle effects can enhance usability but it should be barely noticeable.
- deleted 3mo ago[deleted]
- an0malous 3mo agoThis 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 3mo agoCute (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.
- zdragnar 3mo agoI'm glad I read your comment, I missed that it intentionally gracefully degraded and assumed it was broken, as I'd forgotten I'd set that.
- momojo 3mo agoPSA: Apple menu > System Settings > Accessibility > Motion These cool demos come up now and again and it always takes me a minute to remember I have reduced motion. But for that minute I was disappointedly clicking around thinking "Whats the big deal?"
- diimdeep 2mo agodefaults write com.apple.universalaccess reduceMotion -int 1 && killall Dock
- baldvinmar 3mo agoPoint taken and now you both get notifications as well as a pretty bunny icon to click on, to over rule the system settings.
- lopis 3mo agoWould also be trivial for the author to add a warning for users that have that setting enabled. Something like "Heads-up: you have requested reduced motion, and this library disabled animations as per your request"
- akazantsev 3mo ago> Would also be trivial for the author to add a warning for users that have that setting enabled. Something like "Heads-up: you have requested reduced motion, and this library disabled animations as per your request" They already do exactly this. The commenter wants a switch to force animations anyway, so he can check the demo without changing system settings.
- TurkTurkleton 2mo agoAt the time that I viewed it yesterday, there was no indication that it respected the "prefers reduced motion" setting, so I was very underwhelmed at first until I remembered I had that turned on.
- nerdsniper 3mo agoI'm having trouble identifying any physics at all in this UI design system.
- hedgehog 3mo agoThe library does respect the client-side reduce motion setting (by disabling all animated effects).
- _def 3mo agoOh, thanks for the hint. I actually don't like this - similarly to dark mode setting detection. But I guess thats more a criticism on the OS preferences not being granular enough.
- TylerE 3mo agoIt's not something for you to not like. Many of us that have visual deficiencies and have that setting turned on for a reason.
- hobofan 3mo agoI think there is still a point to be made that alternative more granular settings may help in less people turning it on. e.g. I have "reduced motion" turned on because the workspace switching animation (and some of the other animations) on macOS is unbearably slow, and that flag is the only way to get rid of it.
- dgellow 3mo agoOh thanks, I was also pretty confused
- hyperhello 3mo agoI think you can respectfully disobey that for a demo.
- 3mo ago
- serf 3mo agothat'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.
- baldvinmar 3mo agoPoint taken, scroll-jacking has been removed.
- cynicalsecurity 3mo agoAbsolute bliss.
- sebnado 3mo agolove it I can think of many projects that could use that
- xnx 3mo agoNo apparent relation to the jelly slider: https://docs.swmansion.com/TypeGPU/examples/#example=rendering--jelly-slider https://docs.swmansion.com/TypeGPU/examples/#example=renderi...
- baldvinmar 3mo agoJelly slider was an influence, no denying that.
- weego 3mo agoon 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 3mo agoI'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 3mo agoIf 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.
- blauditore 3mo agoI like the fact that it gives animated feedback to emphasize what is happening/being altered. Native components don't always do that very well. Animations are not just artsy fluff, they have real UX value (if done right, of course).
- kfarr 3mo agoHonestly same, I was less interested in the styling and just interested in the immediacy of response which is ironically missing in a lot of modern ui
- red_hare 3mo agoI think the trick to using libraries like this is to not go all in on them. Applying these effects to every element would be garish. But for a single like button, an effect slider, or magic search bar? It would be be a lovely touch.
- ux266478 2mo agoI don't know. At the point in which you have to reinforce visual context with animations, I feel like you've already failed at the part of UX that actually matters. Like there's already been a cascade of structural failure, and now you're trying to put bandaids over it.
- bmitc 2mo agoThe animations, in this case, are not helpful. They distract from what you're trying to do. And components that don't give feedback are bad. It's trivial to have different color palettes for over, click, release, etc.
- ryanmcbride 3mo agoI flip back and forth every year or so between wanting more fun in my software, and wanting it to get the hell out of my way.
- chuckadams 3mo agoGotta 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 3mo agoIt does not seem to work on Firefox for iOS. I could not see any animation just the tiny click registration cards.
- mrgoldenbrown 3mo agoNor Firefox on Android.
- victorbjorklund 3mo agoPretty cool. Love the button. Not sure I will ever build an app where this makes sense but cool
- claytongulick 3mo agoI love the aesthetic, and I really love that they implemented it as a web component library.
- JLCarveth 3mo agoSo this works on Chrome on my Android phone, but not on Chrome desktop nor firefox.
- NetOpWibby 3mo agoThis is perfect for gaming sites like Splatoon and Roblox.
- chrismorgan 3mo agoPlease 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.
- MrZander 3mo agoAgreed. I almost exclusively use the "middle click" autoscroll feature to scroll on websites. It is completely broken on this site because of the scroll-snap.
- timcobb 3mo ago> It leads to an awful experience for a large fraction of users. can you give an example of why/how? I thought it was well done and enjoyable. Regular fast scroll was still as expected, and then the slower interactions felt like slide changes.
- yellowapple 3mo agoIn my case it's way too sensitive, causing me to scroll too far every time.
- phailhaus 3mo agoNobody expects the scroll behavior to be different on a webpage, so it's always a surprise when a page does something like this. Then, you have to learn to adapt to how it expects you to scroll so that you don't screw up its animations or overshoot. It's the kind of UI that works if you scroll a specific way. A lot of people probably do. But if you don't, it's all very tedious. I consider that to be poor design.
- dymk 3mo agoIt's completely broken if you use it with a mouse that has a scrollwheel.
- rickydroll 3mo agoThis 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 3mo ago? what am I missing? The demo is just rounded corners? do we need a special library for that?
- wbobeirne 3mo agoDo you have reduced motion enabled? That disables all the effects.
- anotheryou 3mo agoah oh! yea only way to use mac....
- flowerbreeze 3mo agoIt'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.
- memjay 3mo agoThis is surprisingly delightful to play around with. We have to put some more fun into UIs, not the same type of AI-slop everywhere.
- chrismorgan 3mo agoSome 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.
- Onavo 3mo agoMaterial Design engineers furiously prompting Gemini to copy it
- ch_sm 3mo agoah finally. Compiz for react.
- DonsDiscountGas 3mo agoOkay I know this is gonna sound rude but who in the world would want form controls that behave this way?
- MarvinYork 3mo agoMe.
- robofanatic 3mo agocandy store, ice-cream place, kid's website?
- baldvinmar 3mo agoSometimes we built for the pure joy of making. Practicality is a bonus.
- childintime 3mo agoIt's the first UI idea in many years that is surprisingly refreshing. It has all the signs of greatness.
- ChiperSoft 2mo agoThat is visible in your code. I was mildly skeptical at first because it just didn't seem like it was doing much more than other design systems. Then I looked at the code. You've built something really great here, your grasp of web components is incredibly strong, and the way you use TypeScript is very light handed in a way that made the code just a delight to read through, in a way I've not had in many years. It's been a while since I looked at a new library's codebase and learned something new, so thank you for that! This may sound silly, but I think you've laid the foundation here for the next Bootstrap / MUI. It just needs more expandability and distribution options.
- nomel 3mo agoMost pages aren't meant to be 100% utilitarian. Most are meant to be little bits of art, that faces a user, that the user will enjoy interacting with.
- jlukic 3mo agoSaw 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'.
- wbobeirne 3mo agoRunning a performance profile in Chrome doesn't back this up for me, and looking at the loop it looks like it maintains an active `Set<JellyComponent>()` of which components to update, and clears them out when they stop moving. Agreed the comments look a bit slop-ish but I don't see anything obviously wrong with its approach, and the core loop is running in microseconds for me when nothing is happening.
- jlukic 3mo agoHere's the perf profile, just to clarify. Cursor idle, viewport on the button examples. 3ms repaint every 8-11ms. Animation frame points to the code i mentioned. https://postimg.cc/sQpZxxzv https://postimg.cc/sQpZxxzv The problem isn't doing work on a website, its if you have an idle task that is taking up a significant portion of the frame budget then its easy to have frame drops when you do significant work like clicking, scrolling, browsing. Idle work showing up in flamecharts is usually the thing to be cautious of.
- Rohansi 3mo agoThat's from Lottie, the animations that play in the header and footer of the page. Shrink your window until they disappear and try again.
- 3mo ago
- einpoklum 3mo agoWaste of computing resources, and mildly distracting. This reminds me of compiz.
- airstrike 3mo agoNo, compiz was awesome
- tiohijazi 3mo agoI dont get why people are so mad at this? Looks fun, will I ever use it? Probably not, but it looks fun
- OsrsNeedsf2P 3mo agoWe're porting our electron app to it as we speak
- madebysnacks 3mo agoAgreed. This is the liquid glass interaction the world deserved
- snitty 3mo agoA single function button should not behave differently based on where on the button you click it. EDIT: It's also WILDLY inconsistent. Click and drag on a button and the shape doesn't change. Click and drag on an on/off and the deformation follows the mouse. Merely click an on/off and the deformation does not follow the the little circle thingy, or bear any relation to the action of the button. Some of the things are inoffensive, spinner dots, progress bars, accordion menus. But basically anything that deforms on click related to where you click are nonsense. EDIT 2: The buttons in the demo area apparently do have distortion that follows the mouse, but on the left side they don't? For me this is just a lot of bafflingly inconsistent gloss that makes me wonder what's going on or why one thing behaves differently than others, and what that means for actual functionality. Rather than just interacting with the UI.
- brettermeier 2mo ago> But basically anything that deforms on click related to where you click are nonsense. Why would you say this? These buttons recognize every click I do on them and I find it very nice that the deformation is different for different click areas. The button still works like a normal button but is nice to look at, or have I misunderstood you?
- zuzululu 3mo agoi think on HN you tend to get overly critical non-useful signals very important to filter out and choose who you engage with
- itishappy 3mo agoI 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.
- smilespray 3mo agoI always had this issue when working with Flash developers. A common mantra was "don't reimplement scrollbars unless you can implement all the features a scrollbar comes with." They always had to do more than five iterations and spent days on that scrollbar.
- baldvinmar 3mo agoGood catch. I've updated the button logic. The click will no longer trigger if the cursor is outside the button boundary.
- jszymborski 3mo agoThis 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!
- nielsbot 3mo agoMeta, 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.
- robofanatic 3mo agohttps://github.com/topics/design-system https://github.com/topics/design-system
- nielsbot 3mo agoOh man there are a lot there: > Here are 5,338 public repositories matching this topic... Thanks for the link--I didn't know you could search Github by topic.
- mplewis 3mo agoStop scrolljacking me.
- whitelinen 3mo agoYour 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
- baldvinmar 3mo agoPoint taken, scroll-jacking has been removed.
- socalgal2 3mo agoI'm not sure I get why the slider lagging behind where the pointer that's dragging it is a good thing.
- altairprime 3mo agoEw ew ew visceral uncanny valley reaction to the on/off control. I never made it to scrolling.
- TheOtherHobbes 3mo agoI'm torn between ugh and ick. It's poorly implemented and looks crude and unpolished. There might be an idea there, for limited applications, but this isn't it.
- im_down_w_otp 3mo agoIs 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.
- krautburglar 3mo agoTerry Davis had a word for things like this.
- red_hare 3mo agoJust 25 years too late to be used to design Jelly World https://neopets.fandom.com/wiki/Jelly_World https://neopets.fandom.com/wiki/Jelly_World
- bigbuppo 3mo agoThat demo makes me nauseous. Buttons shouldn't do that.
- 6r17 3mo agoI love it - stupidly creative - first time i see this yet it feels I always knew how it was meant to behave
- JoshTriplett 3mo agoIt'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.
- timando 3mo agoIt 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.
- Waterluvian 3mo agoAll I want is to be able to shake my phone and watch the UI jiggle.
- qurren 3mo agoNice idea but I feel like it would work better with a non-flat or mildly-3D theme.
- CGamesPlay 3mo agoI 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.
- mscissors 3mo ago[flagged]
- zuzululu 3mo agoit'd be great if flutter had this
- adithyassekhar 3mo agoI don’t like the Chip element it’s supposed to stay in place and toggle instead it goes out of bounds when clicked.
- vivzkestrel 3mo ago- 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?
- neoden 3mo agothen we wonder how are modern computers so slow?
- ezst 3mo agoThat's gross, distasteful. I love it.
- PennRobotics 3mo agoShape "pill": rounded Shape "square": still rounded ----- It's visually creative. At the same time, the reactive animations would bother me (to the point of deeming it unusable) in any production app or website. I'm glad it respects "reduced motion" preferences.
- lopis 3mo agoLooks so nice and it's lots of fun. Great job! With that said, I hope no one ever uses it, it's terrible.
- orthoxerox 3mo agoText boxes should jiggle where I click them, not always in the middle. Drop-down boxes do this correctly.
- abdulrahmank 3mo agoCan be a great value add to show a jelly button when waiting for AI responses
- Caixu 2mo ago[flagged]
- gloosx 2mo agoI 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.
- vim-guru 2mo agoWould be nice for GUI components of a game, but I kind of hope people don't run with this on regular apps/websites. Also, I expected tooltips and submenus to have some flair to them as well.
- n1b0m 2mo agoReally nice library. I’ve reposted this on Reddit r/webdev and you might find some of the feedback there useful.
- armchairhacker 2mo agoCombine with liquid glass and add a hover effect and raytraced lighting for, finally, a decent UI.
- NiloCK 2mo agoI like this a lot and am going to experiment w/ incorporating in my early literacy app. Heads up: the "See it live in the showcase → " links in the API documentation do not go back to the showcase - they just reload the same current API section. Question: maybe I've missed it, but what exists here wrt distribution / packaging / bundling / source availability? I see MIT listed, but no repo. I see src="https://jelly-ui.com/package.js https://jelly-ui.com/package.js" as a sourcing import, but obviously I'm not going to bundle foreign assets into my app.
- marklubi 2mo agohttps://github.com/jelly-org/ui https://github.com/jelly-org/ui It's buried at the bottom. Had to click on the "sponsoring" link, and then select the package. Feels like they should make the repository more prominent.
- NiloCK 2mo agoThanks much. Source code is for customers only I guess :)
- amelius 2mo agoToo bad that most of the effects become invisible behind the finger that is triggering them.
- theF00l 2mo agoI find clicking on these form controls very satisfying :)
- sajithdilshan 2mo agoI love it, it’s perfect for a touch screen UI.
- amelius 2mo agoNo because touching the items cause the effects to become occluded by your finger. Also, the buttons on those spinboxes are way too small.
- eyupucmaz 2mo ago[flagged]
- butz 2mo agoSomeone clearly had a lot of fun making all of those components. Adorable and whimsy. One nitpick - when writing uppercase letters in text field they should make larger ripples than lowercase.
- amelius 2mo agoAnother nitpick: why are only the button outlines having a jelly effect and not the texts written on them? This makes them feel physically unconnected.
- Springtime 2mo agoIs it the UI per se or the site that is requiring local storage? Since the examples don't load with cookies blocked, nor do any of the links/buttons work without it. Ordinarily I wouldn't comment on this (eg: for the plethora of React-using sites that haven't tested without it yet work fine when manually bypassed) but in this case it's intended as a drop-in UI.
- shevy-java 2mo agoIt's funny to have squishy buttons. But I also hate eye-candy. It just takes away time. Time is so finite these days...
- odo1242 2mo agoLooks good overall. My main complaint is that the animations don't all seem to go together - the "Jelly" style of the toggle switch or button (which has squish animations that respond to pointer location) is WAY different from the "Jelly" style of the checkbox (which just resizes), for example. Also, some Jelly buttons animate correctly when you move your mouse over them mid-click, while some remain stuck in the original position when you clicked them.
- Natalia724 2mo agoThis interaction direction is interesting. The hard part may not be the effect itself, but the tradeoff between accessibility, performance, and predictable form behavior. Has the author discussed those boundaries?
- ChiperSoft 2mo agoSo 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.