← All work
game

YumYum

YumYum: an animation library that takes bites out of shapes and images, for loaders, progress bars and delete transitions.

View example ↗
A magenta cupcake silhouette with a round bite out of its frosting, a dashed blue circle and arrow at the bite, and small crumbs scattering left.
YumYum taking a bite out of a cupcake shape, the dashed marker showing where the next bite lands.
A red chili pepper silhouette with several scalloped bites missing and a spray of red and pink crumb particles drifting to the right.
A pepper shape half eaten, crumbs from each bite flying off as small particles.
A magenta cupcake shape with bites taken out of it beside a white settings panel of sliders for speed, bite size, gravity and air resistance, and toggles below.
The demo's tuning panel: speed, bite size, roundness, crumb gravity and display toggles, adjusted live.

YumYum is a small animation library for eating effects. You hand it an SVG path or an image, and it eats it bite by bite with crumbs flying off. It began as Cookie Cruncher, a cookie clicker toy, and became a library for loaders, progress indicators and delete animations in React or plain JavaScript.

Every animation starts from an SVG path. The library parses the path into a grid of where bites can land, so bites only happen inside the shape, and image eating uses an SVG mask cut from that same path. The bite logic is one engine shared by a React hook and a vanilla JS class, and crumbs are a small particle system: SVG in React, a canvas overlay in vanilla.

Status The repo is set up for npm as @snackstudio/yumyum 1.0.0, but the package is not on npm (404 on 2026-10-14); a demo is published on GitHub Pages.