Top
Best
New

Posted by baldvinmar 2 days ago

Jelly UI: Soft-body physics for native HTML form controls(jelly-ui.com)
659 points | 201 commentspage 6
victorbjorklund 2 days ago|
Pretty cool. Love the button. Not sure I will ever build an app where this makes sense but cool
claytongulick 2 days ago||
I love the aesthetic, and I really love that they implemented it as a web component library.
sajithdilshan 1 day ago||
I love it, it’s perfect for a touch screen UI.
amelius 1 day ago|
No because touching the items cause the effects to become occluded by your finger.

Also, the buttons on those spinboxes are way too small.

JLCarveth 2 days ago||
So this works on Chrome on my Android phone, but not on Chrome desktop nor firefox.
mplewis 2 days ago||
Stop scrolljacking me.
NetOpWibby 2 days ago||
This is perfect for gaming sites like Splatoon and Roblox.
an0malous 2 days ago||
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.
chrismorgan 2 days ago||
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.

lopis 1 day ago||
Looks so nice and it's lots of fun. Great job!

With that said, I hope no one ever uses it, it's terrible.

einpoklum 2 days ago|
Waste of computing resources, and mildly distracting. This reminds me of compiz.
airstrike 2 days ago|
No, compiz was awesome
More comments...