Axolotl Jelly
A gummy axolotl you can pull apart. Tear off a leg and it twitches on the table while a new one grows back from the stump.
▶ Play it live on Dream Meridian · Follow along on X · More in the Playground
The 26-second tour: play with it, launch a leg at the camera in slow motion, watch it grow back, then every morph. Recorded silent; the real thing squishes, wobbles and boings. Watch the MP4.
What you can do
- Pull a leg off. Grab a foot and drag. The jelly stretches with a low gummy groan, and the leg pops off with a cork and a boing. It keeps twitching on the table.
- Watch it grow back. A pale bud swells out of the stump and fills in with a rising hum.
- Squish it. Poke the head, drag the tail, throw the goo drops. Twist it with the scroll wheel or a second finger.
- Change the candy. Five morphs (leucistic, rainbow, golden, wild and lagoon), three finishes (glossy, sour sugar, frosted) and four tables (paper, cutting mat, marble, night).
- Launch a leg at your face. Turn on ¼ speed, pull a foot down toward you until it pops, and fling it: it comes flying out of the screen in slow motion.
Run it yourself
No build step, no dependencies. Plain JavaScript and WGSL.
git clone https://github.com/saulfloresjr/axolotl-jelly.git
cd axolotl-jelly
python3 -m http.server 8000
Then open http://localhost:8000 in a browser with WebGPU: current Chrome, Edge or Safari 26 and later. (It needs a local server because browsers won't run it from a file:// path.)
Make your own
Everything is built from code at load time, so changing the creature is changing a few functions.
| You want to… | Look in | What to change |
|---|
| Change the shape | shape.js | The body is a signed distance field: CORE sets its width and height along the spine, FIN the tail fin, LEGS the four legs. Swap in your own SDF to grow a different animal. |
| Change the colours | main.js | LOOKS: each morph is the light that survives one unit of jelly, the shadow colour, the belly and the gills. |
| Change how it wobbles | sim.js | edgeCompliance (springiness), dampRate (how fast wobbles die), and the tear limit in checkTear. |
| Change the sounds | sound.js | Every sound is synthesized with Web Audio: no audio files. Each one is a few lines. |
| Change the coatings | render.js | fsJelly: the sour sugar is a 3-D cell pattern of tilted crystals; frosted is a finer, flatter one. |
If you make something, tag it on X so I can see it.
How it works
- A shape made of distances. The axolotl is a signed distance function: a lofted body with a broad flat head, a fin that wraps the tail, and four legs with splayed fingers.
- Skins and lattices. Surface nets turns that function into a smooth skin. Underneath, a coarse grid of cubes, each split into five tetrahedra, fills the body and each leg separately.
- Soft-body physics. XPBD keeps every edge near its rest length and every tetrahedron near its rest volume, many times a frame. The tail sways because edges along its flanks lengthen and shorten in a travelling wave.
- Tearing and regrowth. Each leg is held on by "glue" links. Pull hard enough and the leg is copied into a spare slot that's glued to nothing, while a 5 % bud takes its place and has its rest lengths scaled back up to full size.
- Gills. Chains of particles pulled softly toward their rest shape, so they hold their form and still flutter.
- Light through gel. Four WebGPU passes a frame: a shadow map, the floor, the jelly's back faces (to measure thickness), then the front faces with Beer–Lambert absorption, refraction and Fresnel.
Credits
License
MIT. Use it, remix it, ship it. See LICENSE.
Dream Meridian builds creative software. Some of it ships as products; some of it ends up as a gummy axolotl.
More in the Playground · Follow along on X
