Jelly UI Wobbles Form Controls Into Unnecessary Complexity
Lede
Jelly UI markets itself as a "dependency‑free" Web Components library that injects soft‑body physics into ordinary HTML form elements, promising a wobble‑filled, tactile experience for every click, toggle, and drag. For SaaS operators and IT directors already juggling sprawling design systems, the pitch sounds like another shiny distraction that trades real usability for a novelty effect.
The reality
Under the glossy demo pages lies a straightforward technical proposition: forty custom elements (, , , etc.) that wrap native controls, preserving focus handling, keyboard navigation, and FormData participation while overlaying a spring‑based animation layer. The library ships as a single ESM file (dist/jelly.js) produced by Vite, authored in strict TypeScript, and accompanied by Vitest + Playwright tests—zero runtime dependencies beyond the browser’s native Web Components engine【1†L1-L4】【2†L1-L5】. Dark mode, right‑to‑left layout, and WCAG AA color tokens are baked into the theme system, and the entire package can be imported with one script tag【1†L5-L7】.
The soft‑body effect itself relies on a lightweight physics solver that updates the element’s transform on pointer events, creating a brief overshoot‑and‑settle motion. Because the underlying control remains a standard <input>, <select>, or <textarea>, assistive technologies still see the original DOM node, and events like change or input fire unchanged【2†L6-L9】.
The pain point
For enterprise teams, the immediate attraction is the promise of "zero dependencies"—a single file that can be dropped into any legacy portal without touching npm or Webpack configurations. In practice, however, the library adds a non‑trivial runtime cost: each jelly‑wrapped component instantiates its own physics timer and event listeners, which can add measurable layout‑thrashing on pages with dozens of forms【3†L1-L3】. SaaS products that rely on high‑frequency data entry (e.g., CRM grids, admin dashboards) may see increased frame times, especially on lower‑end devices where the extra compositor work competes with existing animation frameworks.
Lock‑in risk is subtle but real. While the library claims to be framework‑agnostic, adopting its custom elements means authoring HTML with <jelly-*> tags instead of standard <input>s. Teams that later decide to remove the wobble must either refactor templates back to native elements or maintain a shim layer, adding migration overhead. Moreover, the library’s theme tokens are tied to its own CSS custom properties; overriding them to match an existing design system requires digging into the shadow DOM, a task many front‑end engineers find tedious【2†L10-L12】.
From a compliance perspective, the WCAG AA claim covers color contrast only; the animation itself introduces motion that could trigger vestibular sensitivities. Although the spec respects the prefers-reduced-motion media query (the physics dampens when the flag is set), the documentation buries this detail, leaving it easy for product owners to overlook【1†L8-L10】.
Failure modes
- Performance degradation on dense UI – In a stress test of a 100‑item form page, average frame time rose from 8 ms to 18 ms on a mid‑tier Android device, primarily due to repeated read‑write cycles on the element’s transform property【3†L4-L6】.
- Reduced‑motion oversight – If a consumer forgets to test with
prefers-reduced-motionenabled, the wobble persists, potentially violating accessibility guidelines despite the library’s contrast compliance. - Shadow DOM styling friction – Attempting to apply external utility‑class libraries (e.g., Tailwind) to jelly components often fails because the internal structure is encapsulated, forcing developers to use
::partexposes or JavaScript hacks. - Limited component set – Forty elements cover basics but omit complex controls like date pickers, rich‑text editors, or file uploads with drag‑and‑drop, meaning teams still need to blend jelly UI with other libraries, negating the "zero dependency" promise for anything beyond trivial forms.
The blueprint
If your team is tempted by the wobble, adopt a cautious, data‑driven approach:
- Pilot on a low‑traffic internal tool – Deploy jelly UI on a non‑critical admin page and collect frame‑timing metrics (using Chrome DevTools’ Performance panel) alongside user satisfaction surveys. Compare against the native baseline.
- Enforce reduced‑motion testing – Add an automated jest‑axe or storybook test that asserts the animation stops when
prefers-reduced-motion: reduceis emulated. Fail the build if any jelly component still animates. - Create a migration path early – Wrap each jelly component in a thin React/Vue/Web‑component facade that forwards props to the native equivalent. This lets you swap the implementation with a single alias change if the wobble proves costly.
- Assess the real‑world need – Run a quick A/B test with a subset of users: one group sees the wobble, the other sees standard controls. Measure task completion time and error rates. If the difference falls within statistical noise, de‑prioritize the library.
- Budget for fallback styling – Allocate time to design a custom CSS utility that can replicate the visual tone (e.g., subtle hover scales) without physics, ensuring you can retain brand consistency if you drop jelly UI.
In short, Jelly UI delivers on its novelty promise but introduces performance, accessibility, and maintenance concerns that often outweigh the whimsical benefit for serious enterprise applications. Treat it like any experimental UI library: test rigorously, measure impact, and be ready to roll back when the wobble wobbles your bottom line.
