Web & UI Engineering

Jelly UI — Buttons That Wobble: How a 40-Element Library Brings Soft-Body Physics to HTML Forms

A brand-new, zero-dependency Web Components library tacks real-time soft-body physics onto ordinary HTML form controls. A button does not snap back — it jiggles, settles and feels almost alive.

• Jelly UI ships 40 custom elements as a single, framework-agnostic script tag — no build step, no React or Vue requirement.
• The elements are built on Web Components, so they render inside any browser and play nicely with native focus, keyboard behavior, accessibility and the standard FormData submission cycle.
• Built-in dark mode, right-to-left layouts and WCAG AA color tokens mean the library is usable by default rather than opt-in accessible.

The premise is simple but unusual. The web has run on rigid form controls for three decades: a button you click is a rectangle that changes color; a toggle flips between two crisp states; a slider handle snaps into place. Jelly UI, an open-source project published mid-2026, rewrites that contract. Every control is paired with a soft-body simulation layer, so when a finger, cursor or keypress pushes it, the surface deforms, rebounds and rings down into stillness — the same physics that governs a squishy toy, translated into pixels.

Soft-body physics is the same family of techniques that power jiggly video-game characters and wobbly animated mascots. It treats a surface as a mesh of connected points with stiffness, damping and inertia rather than as a static shape. A point you pull on pulls its neighbors with it; when you let go, overshoot creates a wobble that decays over a few frames. Jelly UI applies that to the small surfaces of forms, not to whole characters, which is why the effect reads as tactile rather than cartoonish.

The engineering constraint is the decisive one. Because the library is built from real Web Components wrapping genuine HTML controls, it preserves the behaviors that screen readers, keyboards and browsers already understand. The wobble sits on top of the control rather than replacing it. That matters: most "delight" libraries rebuild inputs from scratch and lose native semantics in the process. Jelly UI avoids that trap by layering animation onto standards-compliant elements, so it passes accessibility checks, respects keyboard navigation, participates in form submission, and supports right-to-left writing systems out of the box.

Four hundred custom elements, one script tag, MIT-licensed and built in the open. Jelly UI is a small artifact, but it sits at a growing edge in web engineering — the idea that a web interface does not have to feel like polished glass. It can feel like something with mass, bounce and a slight memory of the hand that touched it. For a medium whose default vocabulary is flat rectangles, a wobbly button is a surprisingly big claim about what the web can be.

Knowledge takeaway: soft-body physics treats a surface as a mesh of connected points with stiffness and damping; Jelly UI layers that simulation onto real, standards-compliant Web Components so it keeps native keyboard, focus, accessibility and FormData behavior; the library ships 40 elements, dark mode, RTL and WCAG AA tokens as a single dependency-free script.