FORM / FUNCTION —
DIGITAL REIFICATION OF CRAFT
An avant-garde industrial design publication platform translating physical materials into tactile digital interactive spreads. Custom GLSL shaders generate micro-tactile paper fibers, raw concrete textures, and real-time CAD architectural blueprints in browser canvas with zero raster asset overhead.

The Legacy Impasse vs. The Architectural Thesis
52MB Scan Payloads & 25fps Page-Flip Simulation Plugins
The previous archive attempted physical tactility through brute force: uncompressed 4K spread photography and a DOM-bound page-curl plugin that stuttered on every scroll gesture, destroying the very material illusion it chased.
Zero-Raster GLSL Synthesis & Kinetic Variable Typography
Every surface texture — rag paper fiber, raw concrete aggregate, foil specular sweep — is computed mathematically on the GPU in real time. Typography responds to scroll momentum through bound variable font axes.
FOUR FOUNDATIONAL SUBSYSTEMS
Procedural Simplex Grain
A 60-line GLSL fragment shader synthesizes physical rag-paper fiber dispersion and specular foil sweeps directly on the GPU — zero photographic textures downloaded.
Kinetic Variable Axes
`wght`, `wdth`, and `slnt` axes bind to scroll momentum through a rAF interpolation loop with exponential decay — words condense and expand organically with reading pace.
Font Metric Override Lock
`ascent-override`, `descent-override`, and `size-adjust` descriptors equalize the fallback stack with web type, eliminating all render jumps during font hydration.
Isometric Vector CAD
Architectural floorplates render as crisp isometric vector paths via matrix projection, exportable to SVG coordinates — tactile blueprint detail at infinite resolution.
PHYSICAL PRINT TACTILITY MEETS DETERMINISTIC WEB PERFORMANCE
Most web publications attempt to imitate physical books by loading 50MB of heavy scan photographs and simulated flipping page plugins that stutter at 25fps. Our objective was radical: achieve authentic physical tactility, tactile paper grain, and architectural blue-prints completely in real-time GLSL without a single photographic texture.
Instead of downloading 4K seamless paper background images, a 60-line custom GLSL fragment shader synthesizes physical rag paper grain and fiber dispersion mathematically directly on the GPU at 120 FPS.
Variable font axes (`wght`, `wdth`, `slnt`) bind dynamically to user scroll momentum via high-performance `requestAnimationFrame` interpolation. Words condense and expand organically with the reader's gaze.
Custom font metric overrides (`ascent-override`, `descent-override`, `size-adjust`) perfectly equalize fallback system fonts with web type, completely eliminating render jumps during font hydration.
// Procedural GLSL Fragment Shader: Micro-tactile Paper & Concrete Normal Map
precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform float u_scroll_velocity;
// Simplex 2D noise generator for microscopic paper grain
vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
float snoise(vec2 v) {
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy));
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod289(i);
vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
m = m*m ; m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
// Optical page curvature driven by fluid velocity
float bend = sin(uv.x * 3.14159) * (u_scroll_velocity * 0.04);
uv.y += bend;
// Micro-tactile fiber grain pass (Zero raster textures downloaded)
float grain = snoise(uv * 1280.0) * 0.038;
vec3 paperBase = vec3(0.941, 0.933, 0.925) - grain;
// Specular light sweep across printed foil typography
vec2 lightPos = u_mouse / u_resolution.xy;
float dist = length(uv - lightPos);
float specular = pow(max(1.0 - dist * 1.8, 0.0), 32.0) * 0.22;
gl_FragColor = vec4(paperBase + specular, 1.0);
}TYPOGRAPHIC & TACTILE SPECIMENS

PHYSICAL CODEX TO DIGITAL CANVAS
Interactive spread demonstrating how variable font weights shift dynamically as readers drag across page boundaries, simulating the tactile resistance of heavyweight German archival cotton stock.

SWISS RATIONALISM & BERLIN KINETICS
Every typographic hierarchy was derived from 1950s Swiss modernism and early Bauhaus printing manuals, brought to life through modern GPU compute pipelines without compromising accessibility.
Quantitative Performance Verification
| AUDIT METRIC | LEGACY RASTER ARCHIVE | THEMEIMPACT PROCEDURAL ENGINE | DELTA // NET GAIN |
|---|---|---|---|
| Raster Asset Transfer / Spread | 52 MB (4K Scans) | 0 KB (Procedural) | -100% BANDWIDTH |
| Average Scroll Frame Rate | 24.7 fps (Stutter) | 120 fps (Locked) | +386% FLUIDITY |
| Cumulative Layout Shift | 0.410 | 0.000 | 100% ZERO SHIFT |
| First Contentful Paint | 3.10 s | 0.60 s | -80.6% FCP DROP |
| Average Session Dwell | 1.3 min | 4.8 min | +269% ENGAGEMENT |
| Industry Recognition | None | Awwwards SOTD + FWA | 2 GLOBAL AWARDS |
“They didn't simulate paper — they synthesized it. FORM/FUNCTION now reads like a printed codex and moves like a machine. Our readers physically lean toward the screen.”
CREATE A DIGITAL SPREAD THAT COMMANDS AUTHORITY.
Elevate your brand or institutional portfolio with bespoke shaders, fluid kinetic type systems, and mathematically zero layout shift.