Santioni

A study of santionispirits.com's WebGL experience at two fidelity tiers: an exact offline mirror and a Next.js/GSAP DOM rebuild of the scroll-driven acts.

Services
WebsitesEngineering
Industries
Creative Coding
Tools
GLSLWebGLNext.jsGSAP
Highlight
A closed WebGL system can be read.
Live
Archived

A closed WebGL system can be read

santionispirits.com renders eighteen scenes into a single canvas through a 2MB proprietary bundle. There is no DOM to inspect, no stylesheet to read, and no meaningful source: the entire experience is a shader pipeline and a scroll controller compiled past recognition.

The question this project exists to answer is whether a site like that can be understood — not copied, understood — from the outside.

Eighteen scenes, one canvas
Ten scroll acts, rebuilt
205 assets, 15.3MB
Two tiers: an exact mirror, and a rebuild that proves the reading.

The site refused to be looked at, so it was looked at differently

The first obstacle was not technical subtlety, it was a wall: the original blocks headless Chrome via `GPU.BLOCKLIST`, so every standard mirroring tool gets a redirect instead of a page.

The way through was to stop pretending to be a normal browser and start being an honest one with no GPU. Rendered under Playwright with SwiftShader and window.__WEBGL_CONTEXT_LOSS pre-set to true, the bundle takes its own non-redirecting fallback path — the one it keeps for machines that cannot run the shaders — and the content structure becomes readable.

Tier A is a 1:1 offline mirror. Tier C is a DOM rebuild with real fonts, real 2D artwork, and all ten scroll acts reconstructed in GSAP.

Original
Hydrax 1.1.2018 scenes, one canvas2MB bundle
Mirror
205 asset files15.3MBExact, offline
Rebuild
Next.js 15 + Tailwind 4GSAP + Lenis + ScrollTriggerZustand
Type
Charles RosiePP Nikkei MaruGT Era
Blocked, then read
Ten acts in GSAP
Reduced motion honoured

01 / 03

What it cost

The rebuild is the proof, not the deliverable. Anyone can mirror a site; a mirror demonstrates nothing about whether you understood it. Reconstructing all ten scroll acts in GSAP against DOM elements is what turns a copy into a reading — every act you can rebuild is an act you actually decoded.

This is also where the method that built this site came from. The technique in the blog post about reading a closed WebGL system is this project's method, generalised.

Where it does not work yet

Three things are named as gaps rather than glossed:

The character illustrations are `.bin` mesh geometry with hatching shaders — they are generated, not drawn, and cannot be reproduced as flat images. The rebuild substitutes; it does not match.

The cursor-fluid simulation and the draggable nodes are simplified to scroll-driven motion. Those are the two interactions where the original is doing something the rebuild is only gesturing at.

And prefers-reduced-motion is honoured with instant reveals — which the original does not do at all, and is the one place the rebuild is deliberately better than its subject.