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'.
jlukic
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.
TurkTurkleton
Looks 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.
odo1242
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.
orliesaurus
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.
itishappy
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!
jszymborski
I 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" as a sourcing import, but obviously I'm not going to bundle foreign assets into my app.
NiloCK
I 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.
gloosx
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.
JoshTriplett
I'm having trouble identifying any physics at all in this UI design system.
comments (10)
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'.
jlukic
TurkTurkleton
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.
odo1242
orliesaurus
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.
itishappy
Neave was a personal hero of mine back then... hope you're well if you're reading this!
jszymborski
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" as a sourcing import, but obviously I'm not going to bundle foreign assets into my app.
NiloCK
opacity: 0.5 for disabled elements is a crime.
pointer-events: none on disabled elements and claiming WCAG AA compliance? Ew.
gloosx
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.
JoshTriplett
nerdsniper