I made an interactive version of xkcd 2347, the dependency comic, where you can drag blocks out of the tower and watch everything above them collapse.
Matter.js handles the physics and Rough.js gives it the hand-drawn xkcd look. Each reload generates a different tower from a seeded PRNG that picks a taper profile, varies the block sizes and row widths, and drifts the whole thing slightly off-center as it goes up. The project names are randomly assembled from parts that sound like real packages – things like node-flux.js or libcrypt-fast or [email protected] – though about one in five times you’ll get an actual name like left-pad or log4j instead. Reload enough times and you might run into some unusual tower shapes, and the Konami code does what you’d hope.
The info button shows the tower’s seed, which you can share as a ?seed= URL parameter, basically a way to say “look at this disaster” and have someone else see the exact same precarious arrangement.
Some ways this could go further:
- Upload an SBOM and build the tower from your actual dependency tree, with block sizes based on how many other packages depend on each one
- Pull real dependency data from ecosyste.ms so you can see what your project’s tower looks like before you start pulling blocks out
- Use the phone’s accelerometer to let you tilt and topple the tower