Jelly UI hit the Hacker News front page on July 21, 2026 with 329 points and 135 comments — a rare showing for a UI kit, not a funding round or a console exclusive. The pitch is simple and weird in equal measure: load one script tag, drop in custom elements like <jelly-button> and <jelly-slider>, and your form controls squish, wobble, and ripple like soft-body jelly while keeping real native semantics underneath.
bunpav's take: this is not the next React. It is the kind of open, zero-dependency Web Components experiment that browser-game and game jam devs should bookmark — especially if you're building something with friendslop energy on the web and want UI that feels as tactile as the physics in the game itself.
TL;DR — what people searched after seeing the HN thread
| Question | Direct answer |
|---|---|
| What is Jelly UI? | A 40-component, 0-dependency Web Components library with soft-body physics on real form controls. |
| How do you install it? | One module script: https://jelly-ui.com/package.js — no npm required. |
| Is it free? | Yes — MIT license, built in the open by bmson.com. |
| Why did HN blow up? | Delight vs. disgust: Compiz nostalgia, Liquid Glass jokes, scroll-snap rage, and a genuine performance thread. |
| Will it melt my laptop? | Profile before you panic — demo header animations may dominate CPU; the JellyEngine parks idle components. |
| Good for games? | Yes, selectively — browser games, kid sites, playful indie hubs; not your settings screen with 40 fields. |
| Same as TypeGPU jelly slider? | No — related aesthetic, different project; Jelly UI creator cited the slider as an influence. |
What is Jelly UI, exactly?
Jelly UI is a dependency-free library of 40 custom elements scoped under a <jelly-theme> provider. The tagline on the site — "It's okay to be a little jelly" — is doing more work than it looks: this is not a CSS skin on top of divs. Components like <jelly-button> wrap a real native <button> for keyboard and screen-reader support. <jelly-slider> backs its squishy thumb with a hidden native range input for semantics and form participation. <jelly-select> follows the ARIA combobox/listbox pattern. The physics is visual frosting; the accessibility baseline is deliberate.
Integration is aggressively simple:
<script type="module" src="https://jelly-ui.com/package.js"></script>
<jelly-theme mode="auto">
<jelly-button variant="mint">Publish</jelly-button>
</jelly-theme>
The library ships dark mode, right-to-left support, and WCAG AA color tokens baked into the theme system. Version 1.1 is live on the showcase site with a full API reference. No React. No Vue adapter required. One script tag.
What's in the component library?
The showcase groups 36 documented components across six categories (plus theming). This is not a three-button demo — it's a full product UI kit with jelly soul:
| Category | Components | What they do |
|---|---|---|
| Theming | jelly-theme | Scopes design tokens; force light/dark, follow OS, or re-tint accent. |
| Actions | jelly-button, jelly-icon-button | Capsule and icon buttons with soft-body press deformation. |
| Forms | jelly-checkbox, jelly-input, jelly-label, jelly-otp, jelly-radio, jelly-radio-group, jelly-range, jelly-segmented, jelly-select, jelly-slider, jelly-switch, jelly-textarea | Full form surface — OTP boxes, dual-thumb ranges, combobox selects, auto-growing textareas with caret ripples. |
| Feedback | jelly-alert, jelly-badge, jelly-progress, jelly-skeleton, jelly-spinner, jelly-toaster | Loading, progress, and toast patterns with wobble instead of flat shimmer. |
| Surfaces | jelly-accordion, jelly-card, jelly-chip, jelly-collapsible, jelly-divider, jelly-kbd | Layout and disclosure; jelly-kbd can bind to real keys and depress when held. |
| Navigation | jelly-breadcrumbs, jelly-pagination, jelly-resizable, jelly-tabs | Tabs with a sliding jelly pill; keyboard-resizable panels. |
| Overlays | jelly-dialog, jelly-drawer, jelly-menu, jelly-popover, jelly-tooltip | Modal, sheet, and menu patterns with spring overshoot. |
Standouts for game-adjacent projects: jelly-segmented for mode toggles, jelly-progress with a wobbling fill edge, jelly-toaster via a jellyToast() helper, and jelly-card with optional squish-to-press behavior. If you're skinning a browser-based lobby or a devlog settings panel, you can get surprisingly far without writing custom animation code.
Why did Hacker News care so much?
HN threads about UI libraries usually die in the low double digits. Jelly UI cracked 329 points because it sits at a cultural crossroads in mid-2026:
- Liquid Glass fatigue vs. longing. Commenters called it "the liquid glass interaction the world deserved" and, in the same breath, "visceral uncanny valley." Apple’s glassy iOS aesthetic trained everyone to have an opinion about squishy interfaces.
- Compiz nostalgia. Multiple threads compared it to wobbly-window era Linux compositors — a compliment and a warning label at once.
- Joy vs. pragmatism. When one commenter asked who would want form controls that behave this way, creator baldvinmar replied: "Sometimes we built for the pure joy of making. Practicality is a bonus." That honesty landed.
- Real shipping signals. At least one HN user claimed they were porting an Electron app to Jelly UI. Others named kid-facing sites, candy-store aesthetics, and gaming hubs like Splatoon or Roblox as natural fits.
The thread also surfaced legitimate UX bugs the creator fixed during the discussion: buttons that registered clicks after drag-outside (now fixed), and scroll-snap on the demo page that HN called scroll-jacking — also removed after the pile-on.
What was the performance argument about?
The sharpest technical critique came from commenter jlukic, who profiled the showcase and reported ~3ms repaints every 8–11ms on idle, pointing at Jelly UI's shared animation loop. The code comment in question describes a JellyEngine that steps every live component on requestAnimationFrame and parks components when idle, with delta capping so background-tab pauses do not cause one giant physics step.
Counter-arguments worth taking seriously:
- wbobeirne ran Chrome profiles and saw the core loop in microseconds when nothing moves, with an active
Setof live components cleared on idle. - Rohansi argued much of the flame chart came from Lottie header/footer animations, not the widgets — shrink the viewport until those disappear and usage drops.
- Philip-J-Fry and altairprime pushed the broader point: websites should not pin CPU/GPU like games do, because users do not expect a settings page to drain battery.
bunpav's read: both sides are partially right. A shared RAF loop that keeps stepping live components is a standard game-engine pattern; on a marketing page with decorative Lottie loops, it is easy to misattribute cost in DevTools. But idle work showing up in flame charts is still a yellow flag for production — especially on Safari and mobile, where power-aware browsers already throttle janky tabs. If you adopt Jelly UI for a browser-native game or a jam submission, profile on your target hardware with Reduce Motion off and on, and with header marketing animations disabled.
What UX landmines did HN find?
Beyond performance, the comments mapped real interaction failures worth knowing before you ship:
| Issue | What happened | Status |
|---|---|---|
| Scroll-snap showcase | Fast scroll wheels, trackpads, and scrollbar dragging felt hijacked; users overshot slides or got bounced between sections. | Creator removed scroll snapping during the thread. |
| Reduce Motion blind spot | Many HN readers saw "just rounded corners" until they realized macOS Reduce Motion disabled all effects — a common post–Liquid Glass OS tweak. | Demo now includes a bunny icon override plus notifications explaining the setting. |
| Click vs. drag consistency | Buttons fired clicks after drag-outside; checkboxes did not — inconsistent with platform expectations. | Button logic updated so release outside the boundary does not click. |
| Slider lag | Some users reported the jelly thumb lagging behind the pointer during fast drags — fine for aesthetic squish, wrong if you need sample-accurate scrubbing. | Treat as a design trade, not a bug, unless you tune it. |
| Browser gaps | Reports of weak or missing animation on Firefox desktop, Firefox iOS, and Firefox Android — verify your audience's browsers. | Test matrix required. |
If your players are on desktop Chrome, you're probably fine for a jam build. If you're targeting iOS Firefox or low-power laptops, assume nothing until you've clicked every control yourself.
Jelly UI vs. the TypeGPU jelly slider — don't mix them up
Search results and social clips conflate two different "jelly" projects:
- Jelly UI — broad Web Components library, native form semantics, one script tag, no WebGPU requirement.
- coderomm/jelly-slider — WebGPU-powered raymarched SDF slider built with TypeGPU; requires Chromium-class WebGPU support; core concept by Voicu Apostol.
Creator baldvinmar acknowledged on HN that the slider was an influence. They are complementary vibes, not the same dependency. If you only need one hero slider on a landing page, the TypeGPU demo might be enough. If you need checkboxes, dialogs, OTP inputs, and tabs that all feel like they belong to the same squishy world, Jelly UI is the integrated answer.
Who should actually use this in game projects?
Jelly UI is not a replacement for Unity UI Toolkit, Unreal Slate, or Godot Control nodes. It is interesting for:
- Browser games and three.js jam entries where the UI lives in the same DOM as the canvas — the same audience we wrote about in Primitive Lab coverage.
- Playful indie marketing sites for titles like Dear Passengers or chaotic co-op games where the brand is " disaster with friends."
- Kid-facing or UGC-adjacent web hubs — commenters named Roblox-style aesthetics explicitly; with Roblox Build pushing creation to phones, expect more web wrappers around playful creation tools.
- Electron or Tauri launchers where one squishy settings panel sells the vibe without re-skinning every dialog.
Do not jelly-wrap every control in a data-heavy creator dashboard. HN said it plainly: subtle effects enhance usability; covering every element is garish. Pick one or two hero interactions — a launch button, a volume slider, a party-ready toggle — and leave the inventory grid flat.
Accessibility note: Jelly UI respects prefers-reduced-motion by disabling animated effects. That is the correct default. For game UI, also expose an in-game "reduce motion" toggle that maps to the same preference so players are not forced into OS settings.
What should you do this week?
- Open jelly-ui.com in Chrome with Reduce Motion off — confirm you can see the effects; toggle the demo override if your OS hides them.
- Drop the one-line script into a static HTML prototype of your game's menu or pause screen before you commit to a framework migration.
- Profile CPU/GPU for 60 seconds idle on your minimum-spec target device — note whether cost comes from Jelly components or your own background animations.
- Test Firefox and mobile Safari if your audience is not 100% desktop Chrome.
- Use jelly on hero controls only — one button, one slider, one panel — and keep data-dense forms on plain HTML or your existing design system.
- Read the full API reference on jelly-ui.com before overriding styles; fighting the physics knobs is harder than using the built-in
variantandaccenttheming. - If you need WebGPU raymarched hero visuals instead of form controls, evaluate the separate jelly-slider repo — different tool, same aesthetic neighborhood.
Related reading
- Primitive Lab: bunpav's Procedural 3D Asset Studio Is Live in Beta — browser-native game asset tooling in the same ecosystem as DOM-based game UI.
- The Game Jam 3D Asset Pipeline: Generate, Rig, and Export in Under 48 Hours — where to spend jam hours if UI polish is a deliberate choice, not an accident.
- Top 10 Friendslop Games in 2026 — the genre that rewards playful, tactile interfaces over corporate flatness.
- Dear Passengers: Viral Airplane Game Explained — an indie co-op title whose chaos-forward branding is exactly the vibe Jelly UI sells.
- Roblox Build Turns Text Prompts Into Games on Your Phone — why kid-facing creation platforms keep pushing playful UI forward.
- Jelly UI showcase and API reference — primary source.
- Hacker News discussion (July 21, 2026) — full thread with creator replies.
- coderomm/jelly-slider on GitHub — related WebGPU slider, not the same library.
Jelly UI version, HN score, and creator responses cited here are accurate as of July 21, 2026. The library and demo site are actively iterating — re-check jelly-ui.com and the HN thread before basing a production architecture on snapshot details in this article.