Making images wobble in the browser: masks, spring motion and local GIF/MP4/WebM export
Disclosure: I made Purupuru Maker , the browser tool this post is based on. "Purupuru" (ã·ã‚‹ã·ã‚‹) is the Japanese onomatopoeia for something soft and jiggly, like pudding, cheeks or a jelly cat. The tool does one thing. You paint where a still image should wobble, preview the jelly motion, and export a GIF, MP4 or WebM. All of it runs in the browser tab, with no upload and no account. Below…
"Purupuru Maker" is a browser tool that lets users create wobbling animations, named after the Japanese word for something soft and jiggly. The tool works entirely in the browser without the need to upload or account for user data. The process begins with decoding a static image, such as a PNG, JPEG, or WebP, into memory. A mask is then applied to determine which regions of the image can move.
This mask is not a simple binary selection, but rather a graded brush that controls the strength of each pixel's movement. The resulting soft-body-like deformation is rendered using WebGL2, allowing for real-time preview and export of the animation as a GIF, MP4, or WebM file. The tool supports various motion presets, each defined by parameters like strength, speed, and direction, which can be adjusted to achieve different effects.
The final animation is encoded using the WebCodecs VideoEncoder API, probing the device's capabilities to determine the most suitable encoding method. If MP4 or WebM encoding is not supported, the tool falls back to GIF. The export process runs independently of the main UI thread, ensuring a responsive user experience.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.