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.
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
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.