Porting a WebGL portfolio without Three.js or GSAP

The Work section reproduces a reference that ships a megabyte of Three.js and GSAP. Ours runs on a hand-rolled WebGL2 renderer, a 140-line tween engine and a router that swaps the main element, in under 20 kB gzipped.

The reference site is beautiful and heavy. Every plane on screen is a Three.js mesh, every easing a GSAP tween, and the two libraries alone weigh more than our whole site. Matching the motion did not require matching the stack: a plane is two triangles, a tween is a number moving along an easing curve, and a router is fetch plus a DOM swap.

The renderer keeps a registry of planes that graze on the DOM: each one reads the bounding rect of its HTML twin every frame and lerps toward it. That single idea makes layout, resize and route transitions free, because the DOM already did the hard part. The section's bundle sits in the build's weight ledger like every other file, so a framework sneaking in would show up as a jump nobody accepted.

All posts