Jelly UI 讓表單元件有果凍手感
Jelly UI 是一套零執行期相依的 Web Components 元件庫，想做的是把按鈕、輸入框、開關等表單控制項變得像果凍一樣柔軟、有觸感。它以 Canvas 2D 繪製表面，透過彈簧耦合節點、壓力維持與 requestAnimationFrame 模擬軟體物理；底層仍保留鍵盤操作、標準事件、焦點及 FormData 整合。全套約 40 個 custom elements，涵蓋表單、導覽、提示與 overlay，也內建 dark mode、RTL、減少動態效果及 WCAG AA 色彩 token。
現實應用
這類元件很適合消費型產品、活動網站、遊戲介面、兒童服務，或任何需要強烈品牌個性的操作流程。設計師能快速做出一致的柔軟視覺，前端工程師則不用為每個按鈕各寫一套物理動畫。一般企業後台未必需要整套導入，但拿 badge、switch 或 onboarding 當點綴，也比自己維護 Canvas 動畫省事。
期望評估
我認為低標期望，是用一個 ESM script 就取得完整元件組，快速替 prototype 加上辨識度，同時不犧牲基本表單與鍵盤行為。高標來看，我猜它有機會成為特定品牌的完整 UI 基礎，尤其 token、API 文件與 accessibility 都已經納入架構。不過物理回饋屬於風格選擇，不會自然改善轉換率；動畫太多反而可能分散注意力。
商業策略分析
受影響的主要是小型 design system、互動元件庫，以及承接品牌網站的工作室。我認為 Jelly UI 的商業意義不在取代 React 或 Tailwind 生態，而是證明 Web Components 也能交付高度風格化、框架無關的產品元件。MIT 授權讓團隊容易試用，但專案目前仍年輕，GitHub 尚無正式 release；若是關鍵產品，我會先小範圍導入並鎖定版本，不急著全面替換既有元件庫。
實作細節
最快方式是在頁面加入：
<script type="module" src="https://jelly-ui.com/package.js"></script>
<jelly-theme mode="auto">
<jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>
要自行託管則需下載原始碼，執行 npm install 與 npm run build，並一起部署 package.js 和產出的 dist/。支援目前版本的 Chrome、Edge、Safari、Firefox；技術上依賴 Custom Elements、Shadow DOM、ElementInternals、Canvas 2D 與 color-mix()，舊瀏覽器需要另外評估。