This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend.
What I Built
My son August loves squishies.
He can spend an unreasonable amount of time squeezing them, comparing how slowly they return to shape, choosing the softest one, and deciding which one simply feels better.
He is also usually not particularly interested in the software I build.
So when I saw the theme Build for a Friend, I decided to build something for him instead of solving another developer problem: Squishy Lab, a browser playground where a digital squishy actually deforms, holds an indentation and slowly rises back into shape.
What started as one purple blob got slightly out of hand.
There are now ten squishies, including a mochi, strawberry, banana, cat, cheese and peanut. They can have different finishes and expressions, you can put your own message on them, choose a font and color, hear pressure-responsive Gel or Crunchy sounds, and export the result as a PNG.
The part that matters most to me, though, is that August actually likes it. He has already decided he wants his friends to try it.
That is probably the best user test I could have asked for.
Live demo: https://squishy-lab-phi.vercel.app/
Code
The complete project is open source:
GitHub: https://github.com/Daniele-Cangi/squishy-lab
How I Built It
I did not want the squishy effect to be a scale animation or a shader trick. Under each object is a small volumetric soft-body simulation: a 216-particle, 750-tetrahedron XPBD cage drives a welded 5,402-vertex surface in Three.js.
Pressure is local. Holding longer progressively deepens and widens the dent, different materials resist compression differently, and a delayed deformation state gives the foam its slow recovery. Physics runs at a fixed 120 Hz, while the visible surface, lettering and small details follow the deforming body.
Blender is used as an authoring workshop for some of the shapes and details, but it is not required at runtime. The actual experience runs entirely in the browser.
The AI sits above that deterministic system rather than replacing it.
A user can write:
“Make it firmer, but keep the same color and let it recover slowly.”
and an open-weight model translates that sentence into a small validated material patch.
text
natural language
↓
open-weight model
↓
validated material specification
↓
deterministic compiler
↓
soft-body simulation
Top comments (0)