Jelly UI: Squishy Physics for Standard Web Forms

"It's okay to be a little jelly"

Jelly UI is a library of Soft Web Components designed to bring a tactile, organic feel to product interfaces. By merging traditional form controls with rigid soft-body physics, it transforms static elements into responsive, bouncy components.

🚀 Core Specifications

The library is built for efficiency and accessibility, ensuring that "squishy" doesn't mean "unusable."

🛠️ How it Works

The "softness" of the UI is driven by physics simulations. While the internals are complex, the behavior mimics a basic spring-mass system, which can be represented by the formula:

$F = -kx$

Where $F$ is the restoring force, $k$ is the stiffness, and $x$ is the displacement.

📦 Implementation Guide

Getting started is a simple process. Follow these steps:

• Include the module script.
• Wrap your content in a theme provider.
• Use a custom element like <jelly-button>.

Example Code

To integrate the library, add the following to your index.html:

<!-- Load the Jelly UI library -->
<script type="module" src="https://jelly-ui.com/package.js"></script>

<!-- Implement a themed button -->
<jelly-theme mode="auto">
  <jelly-button variant="mint">
    Publish
  </jelly-button>
</jelly-theme>

For more detailed information, you can explore the API reference or scroll through the live showcase.