Hacker News 中文摘要

RSS订阅

Jelly UI：原生HTML表单控件的软体物理效果 -- Jelly UI: Soft-body physics for native HTML form controls

原文链接 | HN讨论 | 2026-07-21 03:43:20

文章摘要

Jelly UI是一个零依赖的Web组件库，提供柔软触感的界面元素，包含40个自定义组件，支持暗色模式、从右到左布局和WCAG AA色彩标准，只需一个脚本标签即可使用。

文章总结

Jelly UI 是一个无需依赖的 Web 组件库，专为打造柔软、触感丰富的产品界面而设计。它集成了真实的表单控件与软体物理效果，并内置了深色模式、从右到左的文本支持以及符合 WCAG AA 标准的色彩令牌。该库包含 40 个自定义元素，只需一个脚本标签即可引入，且无需任何外部依赖。

Jelly UI 提供了丰富的组件，涵盖主题、操作、表单、反馈、表面、导航和覆盖层等多个类别。主题组件 <jelly-theme> 可限定设计令牌的作用域，支持强制浅色或深色模式、跟随系统设置或重新调整强调色。操作类组件包括胶囊形状的软体按钮 <jelly-button> 和紧凑的图标按钮 <jelly-icon-button>，均支持多种变体、尺寸和形状。

表单组件是 Jelly UI 的核心，包括可切换的复选框 <jelly-checkbox>、单行文本输入框 <jelly-input>、一次性密码输入框 <jelly-otp>、单选按钮 <jelly-radio> 及其分组 <jelly-radio-group>、双滑块范围选择器 <jelly-range>、分段选择器 <jelly-segmented>、下拉选择框 <jelly-select>、单值滑块 <jelly-slider>、开关 <jelly-switch> 和自动增长的多行文本域 <jelly-textarea>。这些组件都采用了软体果冻般的交互效果，例如输入时焦点会抬起并引起表面涟漪。

反馈组件包括四种色调的提示横幅 <jelly-alert>、文本变化时会弹跳的徽章 <jelly-badge>、进度条 <jelly-progress>、轻柔呼吸的加载占位符 <jelly-skeleton>、加载指示器 <jelly-spinner> 以及气泡式通知 <jelly-toaster>。表面组件有可折叠的手风琴 <jelly-accordion>、果冻表面容器 <jelly-card>、标签芯片 <jelly-chip>、可展开的折叠面板 <jelly-collapsible>、分隔线 <jelly-divider> 和键盘按键 <jelly-kbd>。

导航组件包括可拖拽分隔线的可调整面板网格 <jelly-resizable> 和带有滑动果冻标签的选项卡视图 <jelly-tabs>。覆盖层组件有模态对话框 <jelly-dialog>、滑动面板 <jelly-drawer>、非模态浮动面板 <jelly-popover> 和轻量级工具提示 <jelly-tooltip>。所有组件都注重无障碍支持，并提供了完整的 API 参考文档。

评论总结

根据评论内容，总结如下：

主要观点与论据：

  1. 正面评价（认可度较高）：

    • 评论5（cynicalsecurity）：“Absolute bliss.”（绝对幸福。）
    • 评论6（sebnado）：“love it I can think of many projects that could use that”（喜欢，我能想到很多项目可以用它）
    • 评论14（claytongulick）：“I love the aesthetic, and I really love that they implemented it as a web component library.”（我喜欢这种美学，也很喜欢他们将其实现为Web组件库。）
    • 评论21（memjay）：“This is surprisingly delightful to play around with. We have to put some more fun into UIs”（玩起来出奇地愉快。我们需要在UI中加入更多乐趣。）

  2. 负面评价（认可度较低）：

    • 评论4（serf）：“that's a real frustrating form of scrolljacking”（这是一种令人沮丧的滚动劫持形式）
    • 评论8（weego）：“on chrome on a macbook pro page scrolling is noticeably degraded and animations are low fps”（在MacBook Pro的Chrome上，页面滚动明显降级，动画帧率低）
    • 评论17（chrismorgan）：“Please never use scroll-snap as is done on this demo page... It leads to an awful experience”（请永远不要像这个演示页面那样使用scroll-snap...它会导致糟糕的体验）
    • 评论22（chrismorgan）详细批评了多个组件，如OTP输入、分页、标签页等，指出交互问题、可访问性缺陷和性能问题。

  3. 性能与实现问题：

    • 评论26（jlukic）：“This lib runs a RAF animation loop every 8ms across every component on the page that causes the entire document to repaint.”（这个库每8ms在所有组件上运行RAF动画循环，导致整个文档重绘。）
    • 评论8（weego）指出动画帧率低、页面滚动降级。

  4. 可访问性与用户体验：

    • 评论2（TurkTurkleton）赞赏对prefers-reduced-motion的支持，但建议允许用户覆盖系统设置。
    • 评论9（xutopia）：“I'm so glad it allows for preferences to reduce motion. I don't like these kinds of UIs at all”（很高兴它支持减少动效偏好。我完全不喜欢这类UI。）
    • 评论18（rickydroll）认为可修改为对行动不便者有用：“Something like this, where the target changes shape to improve targeting ability... would be wonderful.”（像这样目标改变形状以提高瞄准能力...会很棒。）

  5. 适用场景与局限性：

    • 评论16（NetOpWibby）：“This is perfect for gaming sites like Splatoon and Roblox.”（这非常适合Splatoon和Roblox这类游戏网站。）
    • 评论13（victorbjorklund）：“Not sure I will ever build an app where this makes sense but cool”（不确定是否会构建一个适合它的应用，但很酷）
    • 评论10（orliesaurus）：“If I were younger I would love this. nowadays I spend most of the time tweaking websites to remove this stuff”（如果年轻些我会喜欢，但现在我花时间调整网站去除这些东西）

平衡性总结： 评论呈现明显分歧：部分用户赞赏其美学和趣味性，认为适合游戏或创意项目；但多数用户批评其性能问题（低帧率、滚动劫持）、可访问性缺陷（缺乏对减少动效的充分支持）、以及组件交互设计问题（如OTP输入、分页）。性能优化和用户体验改进是主要争议点。