Wow, thank you so much! I made these using HTML canvases and TypeScript. I’m drawing everything in code, including the pixel art (which is defined in the source).

The animations are made using a small animation system that I made for this post. This system has two useful properties:

1. It allows me to animate whatever property of the object I’m interested in (alpha, frame, etc).

2. It allows me to set up other work to be triggered when the animation has reached a certain completion threshold, which lets the animations flow into each other. This is how (for example) the grid lines ‘cascade’ in after each other.

The 3D animations are also primarily HTML canvases, and I used Three.js to place them as textures in a 3D scene. I have some logic to map the coordinate system of the canvases to the 3D scene, so that I can draw the connective tissue between the canvases and run animations that operate on objects both on the 2D canvases and the 3D scene.