Marginalia: Real-Time Product Rendering in WebGL2

Studio R&D, real-time product rendering. A product for reading a text a second time, taken from premise to a renderer you can turn in the browser. The object has not been manufactured; everything you see is computed live.

The product had to convince without a factory. Materials, dimensions and use needed to be shown well enough that a reader believes it could be made, and the notation had to be simple enough to learn in one sitting.

The premise: in manuscript production the red was a separate pass by a different hand. Here the text is the first pass and the margin is the second.

Twelve marginal marks, from query and objection to return and transfer, drawn on one stroke weight and one grid, and cut through the rule.

The rule is rendered live by a WebGL2 renderer written for the piece, with depth testing, float render targets and anisotropic texture filtering, in four parts and four materials.

The rule, the twelve marks and the edition sit in one interactive HTML file with the fonts, geometry and renderer inside. Fonts are subset in Python with fontTools.

The rule turns and catches light as the pages advance, from the first view of the milled aluminium to the four parts laid out as one extrusion. The edition is set in two inks on a measured margin.

A notation of twelve marks on a single grid.

A product shown in four parts and four materials, rendered live rather than pre-rendered.

Measured on the published build (Chromium 141, Lighthouse 12.8 desktop preset, October 2026):

0 third-party requests. Renderer, geometry and fonts ship in one 2.0 MB file that works offline.

0 JavaScript errors with WebGL disabled or reduced motion on; the page falls back and keeps all of its text.

Lighthouse 100 for best practices and SEO.

The six-page PDF edition embeds every font it uses.

Live build: https://studio-helpers.com/work/marginalia/

Brief the studio: studio-helpers.com · WhatsApp +92 346 6616118 · Sulmancheema82@gmail.com