Jelly UI in 2026: Soft-Body Physics

Jelly UI in 2026: Soft-Body Physics for Native HTML Form Controls

A form control that wobbles when you press it is a signal that the surface you are touching is alive. Jelly UI, an open-source Web Components library published in mid-2026, brings soft-body physics to native HTML form controls by combining standard form semantics with a real-time deformation engine. Every press, toggle, and drag settles with a wobble, and the library does it with zero runtime dependencies, 40 custom elements, and a single script tag.

The project is hosted at jelly-ui.com with its source on GitHub. According to the repo, the library is written in strict TypeScript, bundled with Vite into a single ESM file, and covered by real-browser tests using Vitest and Playwright. As of July 2026, the repo shows 30 stars and 2 commits on the main branch, indicating an early but focused project.

Abstract soft organic shapes representing tactile interface design

Soft-body physics transforms static form controls into responsive, tactile surfaces that deform on interaction.

What Is Jelly UI?

Jelly UI is a dependency-free Web Components library for building tactile product interfaces. It combines real HTML form controls with soft-body physics surfaces, meaning every input, button, checkbox, switch, and slider you already know from HTML participates in FormData, emits standard events, supports keyboard focus, and also deforms like a soft rubber membrane when you interact with it.

How the Soft-Body Physics Engine Works

The core of Jelly UI is its JellyBody simulation, which lives in src/core/ of the repo. Each canvas-backed component owns its own JellyBody instance. The engine models the control surface as a closed ring of spring-coupled membrane points arranged around a rounded rectangle.

The simulation uses a shared requestAnimationFrame loop that steps every live body in fixed-size substeps. This design keeps the simulation stable at any frame rate. When all bodies are at rest, the loop parks itself, so an idle page costs nothing in CPU time. If any body ever produces a non-finite number (NaN or Infinity), it resets itself instead of wedging the entire page.

Key mechanics of the JellyBody engine include:

Pressure-based volume preservation: When the user presses into the surface, the membrane displaces volume rather than collapsing. This creates a realistic squish effect.
Pointer-following press targets: The deformation tracks the pointer position, creating a dimple that follows the cursor or finger.
Tilt and perspective: The surface responds to the interaction angle, adding depth to the deformation.
Spring-coupled membrane points: Each point in the ring is connected to its neighbors by spring constraints with configurable stiffness and damping.

The rendering pipeline uses Canvas 2D for the deformed surface. Canvas-painted surfaces listen for theme changes and repaint themselves automatically. The library also supports prefers-reduced-motion: when the user’s operating system requests reduced motion, the physics engine bypasses all impulses entirely, providing instant static feedback instead of a wobble.

This architecture is fundamentally different from CSS-based animation approaches. CSS transitions can fake a squash-and-stretch effect, but they cannot simulate pressure displacement, pointer tracking, or spring dynamics. Jelly UI’s approach is closer to how game engines handle soft-body physics, but optimized for the constraints of browser-based UI rendering.

Code Examples: Using Jelly UI in a Real Project

Getting started with Jelly UI requires one script tag. The entry point is the public package.js file that re-exports the built bundle and registers every component.

Basic setup in an HTML page:

Note: The following code is an illustrative example and has not been verified against official documentation. Please refer to the official docs for production-ready code.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Sign Up - Jelly UI</title>
 <script src="https://jelly-ui.com/package.js" type="module"></script>
</head>
<body>
 <form id="signup">
 <jelly-input label="Email" type="email" name="email" required></jelly-input>
 <jelly-input label="Password" type="password" name="password" required></jelly-input>
 <jelly-button variant="filled" type="submit">Subscribe to newsletter</jelly-button>
 </form>

 <script>
 document.getElementById('signup').addEventListener('submit', (e) => {
 e.preventDefault();
 const data = new FormData(e.target);
 console.log(Object.fromEntries(data));
 });
 </script>
</body>
</html>

Every form control in Jelly UI participates in FormData via the ElementInternals API. That means standard form serialization, validation, and submission work without any special handling. The label attribute on inputs provides accessible naming for screen readers.

JavaScript API for programmatic control:

Note: The following code is an illustrative example and has not been verified against official documentation. Please refer to the official docs for production-ready code.

import { setThemeMode } from 'https://jelly-ui.com/package.js';
setThemeMode('dark');

const planSelect = document.querySelector('jelly-select');
planSelect.addEventListener('change', () => {
 console.log('Selected plan:', planSelect.value);
});

const notifSwitch = document.querySelector('jelly-switch');
notifSwitch.checked = false;

const form = document.querySelector('form');
const formData = new FormData(form);

Custom theming with CSS variables:

Note: The following code is an illustrative example and has not been verified against official documentation. Please refer to the official docs for production-ready code.

<style>
 :root {
 --jelly-color-background-accent: #7C3AED;
 --jelly-color-background-azure: #4F46E5;
 --jelly-font-display: 'Inter', system-ui, sans-serif;
 }

 jelly-button.custom {
 --jelly-fill: #5A5A5A;
 --jelly-label: #FFFFFF;
 }
</style>

<jelly-button class="custom">Custom styled button</jelly-button>
<jelly-button variant="rose">Rose variant</jelly-button>
<jelly-button variant="amber">Amber variant</jelly-button>
<jelly-button variant="graphite">Graphite variant</jelly-button>

The variant system maps to theme tokens that adapt to dark mode automatically. Without a variant, filled controls use the shared accent fill defined by --jelly-color-background-accent and --jelly-color-foreground-on-accent.

Close-up of HTML form controls on a web page

Jelly UI components participate in FormData, emit standard events, and support native keyboard behavior just like regular HTML controls.

Comparison With Other Physics-Based UI Approaches

Several approaches exist for adding physical surface effects to web interfaces, each with different trade-offs in performance, integration complexity, and accessibility. Jelly UI is one option among them.

Approach	Rendering method	Dependencies	Form participation	Accessibility model	Best for
Jelly UI (Web Components)	Canvas 2D + Shadow DOM	Zero runtime deps	Full (ElementInternals, FormData)	WCAG AA tokens, ARIA patterns, keyboard nav, reduced-motion	Production forms with tactile feedback
CSS-only squash/stretch	CSS transforms + transitions	None	Native (no wrapper)	Depends on implementation	Simple button hover effects
Canvas/WebGL physics (e.g., matter.js)	Canvas 2D or WebGL	Physics library required	None (custom DOM sync needed)	Manual implementation required	Games, simulations, non-form UI
SVG-based deformation	SVG path animation	None	Partial (custom elements needed)	Depends on ARIA integration	Animated icons, decorative elements

The key differentiator for Jelly UI is that it preserves native form behavior. CSS-only approaches cannot simulate pointer-following deformation or pressure displacement. Canvas/WebGL approaches require custom DOM synchronization for every form control, which breaks standard form submission, validation, and accessibility. Jelly UI’s Web Components architecture wraps the physics engine inside standard HTML elements, so developers get tactile feedback without sacrificing browser-native form features.

Another important distinction is the rendering pipeline. Jelly UI uses Canvas 2D for the deformed surface, which gives it access to per-pixel manipulation that CSS cannot match. However, Canvas rendering means components cannot be inspected or styled via standard CSS selectors for their visual output. Jelly UI handles this by exposing extensive CSS custom properties for color, spacing, typography, and focus ring styling, while keeping deformation rendering internal to the Canvas.

Performance Across Browsers and Devices

Jelly UI’s performance characteristics depend on several factors: the number of active physics bodies on the page, the mesh resolution of each body, the device’s GPU and CPU capabilities, and whether the user has enabled prefers-reduced-motion.

The library’s design choices target performance explicitly:

Shared rAF loop: A single animation frame loop steps every live body, rather than each component running its own timer. When all bodies are at rest, the loop parks itself, consuming zero CPU.
Fixed-size substeps: The simulation runs in fixed-size substeps regardless of frame rate, preventing physics instability on low-FPS displays.
Non-finite reset: If any body produces NaN or Infinity, it resets itself rather than corrupting the simulation.
Reduced-motion bypass: On devices where the user has enabled prefers-reduced-motion, the physics engine skips all impulses, providing instant static feedback.

Because the project has not published independent third-party benchmarks, specific frame-rate numbers are not yet available from external sources. The library’s own documentation describes the shared rAF loop and fixed-size substep design as mechanisms to maintain stability across frame rates, but quantified performance data across browsers and devices remains something the community will need to establish.

The primary performance consideration is mesh resolution. Each JellyBody membrane point requires spring calculations per frame. A higher-resolution mesh (more membrane points) produces smoother deformation but increases CPU load. The library’s default configuration appears tuned to balance visual quality with performance on mid-range hardware, and the JellyBody parameters in the source code are configurable for teams that need to adjust this trade-off.

Browser support requires Custom Elements, Shadow DOM, ElementInternals, ResizeObserver, Canvas 2D, color-mix(), and CSS logical properties. This means current Chrome, Edge, Safari, and Firefox are supported, but older browsers and non-Chromium-based browsers without these APIs will not render the physics effects.

Limitations and Trade-Offs

Key Takeaways:

Jelly UI preserves native form behavior (FormData, keyboard nav, events) while adding soft-body physics, a combination no other library offers.
The physics engine uses a shared rAF loop that parks itself at rest, making idle pages cost nothing in CPU.
Performance on low-end devices can degrade with multiple active bodies; mesh resolution and spring stiffness are the main tuning knobs.
The project is early-stage (30 GitHub stars, 2 commits as of July 2026 per repo) and lacks third-party benchmarks and large-scale production case studies.
Accessibility features are built in (WCAG AA tokens, ARIA patterns, reduced-motion support), but real-world testing with screen readers is still emerging.

Jelly UI is an impressive technical achievement, but it comes with real trade-offs that developers should evaluate before committing to it in production.

Project maturity. The GitHub repo shows 30 stars and 2 commits on the main branch as of July 2026. This is an early-stage project. The API may change, components may have undiscovered bugs, and the community ecosystem is minimal. Developers building critical applications should evaluate whether they are comfortable depending on a library this young.

No third-party benchmarks. All performance claims come from the library’s own documentation and early adopter reports. Independent benchmarks across browsers, devices, and interaction patterns have not been published. Teams should run their own performance testing before deploying Jelly UI to production, especially on the target hardware their users will be running.

Canvas rendering limitations. Because the deformed surface is rendered via Canvas 2D, the visual output is not accessible to standard CSS inspection tools. Developers cannot use browser DevTools to inspect the rendered surface as they would with standard DOM elements. The library mitigates this through extensive CSS custom property exposure, but it is a fundamentally different debugging experience.

Accessibility validation gap. While the library builds in WCAG AA color tokens, correct ARIA patterns, keyboard navigation, and reduced-motion support, independent accessibility audits with screen readers (NVDA, VoiceOver, JAWS) across different component configurations have not been widely published. Teams with strict accessibility requirements should conduct their own audits.

No production case studies. As of July 2026, no large-scale production deployments of Jelly UI have been documented. The library’s show page shows components, but there are no published case studies showing how the library performs under real-world traffic, complex form logic, or integration with existing design systems. This is a significant gap for teams evaluating the library for production use.

What to Watch Next

Jelly UI sits at an interesting intersection of web standards, game physics, and accessibility engineering. Several developments will determine whether it becomes a mainstream tool or remains a niche experiment.

Independent benchmarks. The most valuable next step would be a published benchmark comparing Jelly UI’s physics engine against CSS-only approaches and Canvas/WebGL alternatives on a standardized set of devices. This would give teams the data they need to make informed decisions about performance budgets.

Production case studies. A documented case study of Jelly UI in a production application with real user traffic would address the biggest open question: does tactile feedback actually improve user engagement, conversion rates, or task completion times, or is it purely cosmetic?

Accessibility audit results. A published accessibility audit from a recognized firm or organization would validate the library’s claims and give enterprise teams confidence in its compliance story.

Expanded component coverage. The library currently covers 40+ components, but gaps remain. A date picker, color picker, file upload, and rich text editor are common form controls that would benefit from soft-body physics but are not yet implemented.

Community growth. The GitHub repo’s star count and commit frequency will indicate whether the project attracts maintainers beyond the original author. A healthy community is essential for long-term viability, especially for a library that touches accessibility and form behavior, where bugs can have serious consequences.

For developers who want to experiment with Jelly UI today, the best starting point is the official show page, which shows every component live with interactive controls. The GitHub repo contains the full source code, build instructions, and API documentation. The library’s MIT license means it can be used in commercial projects, but early-stage maturity should factor into any production decision.

Jelly UI answers a question few developers thought to ask: what if form controls felt soft? The execution is technically sound, the architecture is clean, and the commitment to accessibility and standards compliance is genuine. Whether that is enough to overcome the maturity gap is an open question for the second half of 2026.

More in-depth coverage from this blog on closely related topics:

Sources and References

Sources cited while researching and writing this article: