01 / WebGL
Real-time structure.
React Three Fiber manages the scene graph while procedural geometry, lighting, camera movement, and material states create a live architectural model rather than a prerecorded effect.
Case study / Architecture / 2026
MØNOLITHArchitectureSpace in code.
An architecture experience built at the technical edge of creative front-end work: procedural geometry, shader-driven visuals, spatial interfaces, scroll-linked 3D, and responsive performance decisions.
Three.js / R3F
GLSL / GSAP
GLSL / GSAP
Architecture / Spatial systems / 2026
We shape empty space.
01 / RoleCreative direction + front-end engineering
02 / StackThree.js / React Three Fiber / GLSL
03 / FocusSpatial interaction + adaptive performance
Stop pretending the browser is flat.
MØNOLITH started with a question: what happens when an architecture website behaves like space instead of a slideshow? The opening sequence renders a live structure in WebGL, the scroll position changes the camera and object state, and later sections use interactive materials and spatial studies instead of decorative 3D pasted behind text.
02 / Shaders
Material becomes interface.
GLSL and Three.js material systems let concrete, glass, steel, and stone behave differently while the interface exposes those states as part of the story.
03 / Mobile
Performance is art direction.
Mobile lowers render density, removes desktop-only pointer behavior, simplifies expensive effects, changes layout and typography, and keeps the visual idea without treating a phone like a weaker desktop.
The impressive part is not 3D. It is knowing when 3D earns the cost.
Run the live experience.
Open MØNOLITH
The full build includes a scroll-controlled architectural model, interactive floor plan, material laboratory, project archive, studio pages, and mobile-specific behavior.