LEACB started as a simple static page and evolved into a full 3D interactive experience. The architecture is deliberately vanilla — no React, no Next.js, no build tools. Just ES modules, Three.js, and hand-written CSS. Every byte is intentional.
The module system loads in a waterfall: loader.js initialises the loading screen and
progress bar, scene.js sets up the Three.js renderer, camera, and post-processing
pipeline, ui.js manages all DOM interactions, and navigation.js
orchestrates panel transitions.
The 3D scene is the heartbeat of LEACB. A TorusKnot wireframe rotates at the center. Surrounding it: an icosahedron, octahedron, dodecahedron, and two torus rings — all rotating at different speeds and axis combinations. 3000 particles float in the background.
Post-processing is handled by UnrealBloomPass via the Three.js EffectComposer. The bloom gives everything that signature sci-fi glow. Fog at density 0.045 fades distant objects into the void.
Each section — about, projects, skills, blog, playground, contact — is a floating 3D plane in the
scene. On navigation, the camera smoothly interpolates to the target panel using lerp.
The panel textures are rendered as canvas elements with custom typography and corner alignment
markers.
The UI layer is entirely glass-morphism: backdrop-filter: blur(20px) over translucent
dark backgrounds. Borders use subtle glow effects via CSS custom properties. Every transition uses
cubic-bezier(0.23, 1, 0.32, 1) for that snappy-but-smooth feel.
"The best interface is one that feels like it's made of light."
Despite the heavy visuals, LEACB targets 60fps. The FPS counter is displayed in the HUD for debugging. Key optimisations: wireframe geometry, frustum culling, bloom threshold tuning, and keeping particle counts balanced. On mobile, animations are simplified.
LEACB will continue evolving. Planned additions include shader-based backgrounds, GPGPU particle systems via compute shaders, and interactive 3D project showcases where each project lives in its own mini-scene.