CleancodePage

The header isn’t just a static image—it runs a small engine that draws a triangulated mesh and cycles through several animation modes. Triangulr builds a Delaunay-style grid from the viewport; each animation script takes that grid and does something different with it.

The part I care about most here is the animation layer. Instead of a single canned effect, the site runs a handful of different modes (you can force one with the ?animation=N query param). Each mode is its own script: it receives the same triangulated SVG and the same animation handler, so they share timing and lifecycle but can focus on different ideas—some tweak opacity and transform, others drive paths or groups.

Under the hood it’s vanilla JS, requestAnimationFrame, and D3 for DOM selection and transitions. No heavy animation framework. The grid is generated by Triangulr (custom code that lays out points and builds the mesh), and each animation just reads the structure and animates it. That keeps the bundle small and makes it easy to add or tweak modes without pulling in new dependencies.

If you’re into procedural backgrounds or want the front page to feel a bit more alive without a full-blown canvas app, this kind of setup is a good fit: one shared “stage,” many small scripts, and a simple loop that rotates them.