wobble Get the template

Real-time soft body · WebGL2

Wobble.

A slice of watermelon jelly that behaves like one. Grab it, stretch it, twist it, toss it, cut it into pieces. It always wobbles back.

A glossy slice of watermelon jelly with dark seeds, sitting on a white plate

Keyboard: arrow keys poke the jelly, S slices it, K toggles the knife, R resets. Hold Shift and drag to squish. Two fingers on the jelly pull it apart.

Mass0g
Volume held100%
Motion energy0µJ
Frame rate0fps

How a jelly holds together

A lattice inside

The slice is filled with a few hundred particles, joined into tetrahedra. The glossy skin you see is pinned inside that lattice, so every seed and every stripe of rind rides along when it bends.

Twelve small steps a frame

Each frame the solver takes twelve tiny steps. Each step nudges every edge back toward its resting length and every tetrahedron back to its resting volume. That is why it squashes without shrinking, and wobbles instead of snapping.

Light that goes through

The renderer measures how thick the jelly is at every pixel. Thin edges glow, thick middles go deep red, and the plate behind is bent by the surface, the way light moves through real gelatin.

Questions

How does the knife cut it?

The line you draw becomes a plane. The plane is mapped back into the jelly's own material coordinates, and each side is rebuilt as a new piece that keeps its seeds, its rind and its current motion.

Does it work on a phone?

Yes. It runs on WebGL2, which every current phone and desktop browser supports. It lowers its own resolution if frames run slow and stops drawing when it is off screen.

Why do the readings change while I squash it?

They are measured live from the simulation. Volume held shows how well the jelly keeps its volume while you deform it; motion energy is the kinetic energy of every particle, using a gummy density of 1.2 g per cubic centimetre.

Can I use this on my own website?

Yes. Wobble is a website template from Apex Flow Digital: the engine source, this page, and one config file where you choose the shape, the flavours and the colours.