santionispirits.com, the illustrated experience

Analysed: 05/10/2026 · By: Design Lab · Evidence: captures/santionispirits/2026-10-05/ (probe frames, a run past the gate in run/, the compiled shader text, the request log). Third-party site, held as internal evidence only (ADR 0001). A spirits brand behind an age gate. Nothing here is republished, and nothing of theirs (pictures, code, sound, type) is carried into any build: what we take is how it is done.

Instruments: the exemplar probe on full Chromium (renderer ANGLE Metal), then a capture driven by hand past the gate: an init script recorded every shader source the page compiled (shaderSource), counted draw calls per frame and the programs and textures created, and logged every response. Keyboard access was a twelve-press Tab walk; sound, a hook on AudioContext and media playback; motion, the share of pixels that changed in one second, with and without reduced motion.

---

1. What it is

A short graphic novel: a hooded figure crosses a stone landscape to a red disc, a hand reaches out ("hold and move"), a portal opens, and the story ends in a red hall of columns with the bottles on an altar. Panels hang in space and the story moves through them; the wheel drives it (the page itself does not scroll). It opens with the title rising out of cream.

2. Techniques

T1 · Live 3D drawn as ink

Most of what reads as illustration is geometry, lit and drawn as ink in the fragment shader. 35 shaders sample a tiled line texture; in the simplest, the whole method is four lines:

• the line texture is tiled across the surface's own UV (so lines follow the form) and slid with time;
• a tone is worked out for each pixel (here a radial gradient standing in for light; in others the light direction is a uniform, used by 46 shaders);
• value = lines + noise * tone^2 + (tone * 2 - 1) * 0.5;
• value = aastep(0.5, value): a threshold with its edge softened by the pixel's own derivative, so the result is pure ink or pure paper with no aliasing.

Where the tone is low, only the darkest part of each line falls below the threshold and the lines are thin; as the tone rises the lines thicken and merge to black; noise added only in the bright end breaks the lines into dots "as light gets brighter" (their comment). The palette is two colours: ink and paper, plus a spot red.

Suits: a brand with an illustrative identity, storytelling, crafted products, anything where "drawn" says more than "photographed". Does not suit: anything whose truth is photographic (a property, a food menu), and anyone who needs the facts quickly.

T2 · Line boil on stepped time

steppedTime = floor(time * 8.0) / 8.0: everything that should feel hand-drawn (the line texture's slide, the noise in panel borders) moves only eight times a second, while the scene renders at 61. Hand-drawn animation redraws each frame, so lines tremble; this is that tremble, cheaply. Panel borders are cut from noise sampled at stepped time, so their edges boil too, and the noise grows under the pointer.

T3 · Panels as clipped bands, flown into

62 shaders take uDiscardTop and uDiscardBottom and discard any pixel outside a band of the screen's height: several scenes share one canvas, each confined to its panel. A fixed-camera matrix (18 shaders) and a transition uniform (20) are part of how the story moves from panel to panel; exactly how they combine was not traced.

T4 · A GPU fluid simulation for the cream

Thirteen shaders name fluid, with velocity, pressure, divergence and curl passes: a grid fluid solved on the GPU. The cream the title rises out of is the only fluid on screen, so almost certainly this; not traced to the pixel.

T5 · Animated skinned figures under the drawing

Eight shaders take a bone texture: rigged, animated 3D figures, drawn in ink by T1. The hand in "hold and move" is real geometry.

T6 · Sound by a sound studio

65 audio files and a "Toggle audio" button: stems and one-shots placed through the story.

3. Failures

• F1 · An age gate no keyboard can pass. "Yes" and "No" are plain divs with no role and no tab stop. Twelve presses of Tab never moved focus off the page body. Every keyboard and screen-reader user is shut out of the whole site at its first screen. The rule: an age gate's answers are buttons, now in web-frontend for any screen that must be answered before the site, with focus kept inside it while it is open.
• F2 · Sound starts on the gate's click. Pressing "Yes" (a different decision) left an AudioContext running and a media element playing. The toggle exists; the default should be off (our sound gate).
• F3 · Reduced motion ignored once past the loader. In one second 12.5% of the frame changed without reduced motion and 12.8% with it.
• F4 · Scroll locked. html { overflow: hidden }; the wheel drives the story, and a wheel turned to read moves it on. Behind the intro, the first screen's two actions are covered.
• F5 · 8 MB and 232 requests for the experience.

4. Instruments

• I1 · The probe stops at an age gate. Its first run measured the loader and the gate and nothing else (scroll "locked", 0 of 2 actions pressable, an LCP of a span). Read the gate's controls from the accessibility tree and pass it by hand before measuring anything. Check the frames: if they show the gate, the numbers are the gate's.

5. What we take

T1 to T3 are rebuilt from scratch as the specimen drawn in ink: our own lathe-turned object and our own line pattern, lit by the visitor's pointer, boiling at eight frames a second, inside panels that the camera flies into. Nothing of theirs is used.