Jelly Button

A Halloween button cast in gelatin. A plump pill of pumpkin jelly with trick or treat suspended inside it and a gummy eyeball floating in each end. The eyes doze until your pointer comes near, then open and follow it. Jelly strings reach out and wrap your skeleton-gloved hand. Press and it squashes, the eyes go wide, and it bounces back taller before it wobbles to a stop.

Live → jelly-button.vercel.app · Demo video (MP4)

One HTML file, raw WebGL2, no dependencies, no build step.

Run it

Open index.html in a recent Chrome, Edge, Safari or Firefox, or serve the folder:

python3 tools/serve.py 3014 .

Hover near it	the eyes open and follow you, the glow inside wakes, strings reach for the pointer
Hover over it	the skin swells toward your pointer and the highlight bends to follow you
Press	it dents under the finger and spreads; the eyes go wide with pinprick pupils
Release	it rebounds taller and narrower, rocks, and ripples ring out from where you let go
1 – 4 or the chips	Pumpkin, Slime, Blood, Plum: the colours melt from one into the next
D or the Dark chip	light studio or Halloween night (follows your system until you choose)
T or the Tune chip	sliders for the jelly (wobble, glow, density…) and the strings (reach, snap, flow…)
?flavor=slime&theme=dark	open straight into a flavour and theme

It is a real <button>: keyboard focusable, and it fires jelly:activate.

JellyButton.element.addEventListener('jelly:activate', () => { /* … */ });
JellyButton.setFlavor('blood');

What is ours, what is Venom's

This is a fork of exteestudio's Venom Button (MIT). The top-down ray-marched scene, the string physics and the cursor icon that gets wrapped are theirs. Everything that makes it jelly and Halloween is new:

• Gelatin. You look through the jelly to the floor beneath, bent by refraction and coloured by depth: deep at the core, nearly clear at the thin edges, a milky haze only at the centre.
• A candle inside. The glow flickers, wakes as you come near and flares on a click; at night it lights the floor around it.
• Letters suspended in the jelly, softened and bent by the skin above them, with at least 4.7:1 contrast in every flavour and both themes (measured, qa/contrast.py).
• Gummy eyeballs with irises in each flavour's colour. They rest looking straight out, half asleep; only a pointer near the jelly is worth watching. They blink, sometimes twice, go wide when you press, and hang in the jelly so they swing a beat behind its wobble.
• Jelly physics. It plops down on load, squashes on an underdamped spring, rocks on two more, swells under a hover, dents under a press, and rings out ripples.
• Wet skin. Crisp studio highlights with faint rainbow fringes, an edge that glows in the jelly's own colour where light pipes through the rim, a few sweat beads and air bubbles.
• Strings that carry the light. At night they glow along their length in the flavour's colour.
• Halloween hand. The pointer is the normal arrow; when the jelly grabs it, it becomes a black skeleton glove. Same outline as the original hand, so the strings still wrap each finger.
• A pointer that sits right. Out in the open its shadow is drawn from its own outline, tight and soft; it rises only when it comes over the jelly.
• Four flavours, two themes, a tabbed Tune card in the flavour's colour, and a CSS jelly with both eyes for browsers without WebGL2. The original's no-WebGL fallback threw on load and never drew; that is fixed here.

Compared with the original

Both rendered under identical conditions (same viewport and scale, same scripted pointer, qa/compare.mjs), scored 0–10:

	Venom	Jelly
Material & realism	9	7.5
Motion & physics	9	8.5
Character & idea	8.5	9
Reads as a button (label contrast 14.2:1 vs ≥4.7:1)	9.5	8
Polish & restraint	9.5	7.5
Performance (uncapped, 2880×1800: ~310 vs ~250 fps idle, ~305 vs ~130 busy)	9.5	7.5
Robustness & access	6.5	8.5
Customisation	7.5	9.5
Overall	8.6	8.3

Venom is one idea, polished over 25 rounds; the jelly trades some of that restraint and speed for character, flavours, themes and a working fallback. The biggest gap left is that the straight-down camera hides the jelly's sides, where real jelly shows the most.

QA

Headless Chrome over the DevTools protocol, real time and real mouse input (qa/chrome.mjs):

node qa/look.mjs                # idle, zoom, reach, hover, press, flavours, phone → qa/out/
node qa/eyes.mjs                # eyes rest when the pointer is far, track when near
node qa/cursor.mjs              # the pointer and its shadow: open floor, approaching, over the jelly, caught
node qa/ui.mjs                  # one cursor over the chips, the Tune card, hover swell and press dent
node qa/themes.mjs              # both themes, every flavour, and the theme switch
node qa/strings.mjs             # strings out, every flavour, both themes
node qa/legibility.mjs && python3 qa/contrast.py   # label contrast, every flavour, both themes, two sizes
node qa/small.mjs               # phone layout and reduced motion
CHROME_ARGS="--disable-3d-apis" node qa/nogl.mjs   # the CSS fallback
CHROME_ARGS="--disable-gpu-vsync --disable-frame-rate-limit" node qa/perf.mjs   # uncapped frame rate vs the original
CHROME_ARGS="--disable-gpu-vsync --disable-frame-rate-limit" node qa/demo.mjs   # re-record media/demo.mp4

Credits

• Original: Venom Button © 2026 exteestudio, MIT (see LICENSE). qa/ref/venom.html is an untouched copy, kept for the side-by-side tests.
• Font: Geist by Vercel and basement.studio, SIL Open Font License 1.1 (fonts/Geist-OFL.txt).
• Cursors: left_ptr and hand2 from the Figma Community file "Cursors" (cursors/); the hand is redrawn inside as a skeleton glove.
• Techniques: smooth-min and SDF primitives after Inigo Quilez.