Maze

About

Built with Three.js and WebGL, Maze's hero renders the attack surface as a living globe of 60,000 particles distributed across a golden-angle spiral. A custom GLSL ShaderMaterial drives everything: 3D simplex noise breathes the surface in and out, a plasma-field fragment shader blends cyan-to-magenta colour patches across the sphere, and each particle assembles from scattered chaos positions on first load with per-particle staggered easing. Sixteen real CVE labels sit at fixed positions on the sphere and are projected to screen space each frame, up to four of the most camera-facing ones are shown at any time, fading in once the intro settles. Pointer hover runs a CPU spring-mass simulation to repel particles from the cursor, and the globe is drag-rotatable on desktop. Elsewhere on the site, a flat particle wave (~150k points) responds to scroll with noise-driven shaping, and subtle full-bleed shader backdrops are managed through a CMS-driven shaders.com library. Three.js loads lazily, only when a WebGL marker exists in the DOM. Built in collaboration with Julien Renau (julienrenau.com)

Category

Technologies

Need help building something similar?

Three.js Web Development →

Add Our Badge to Your Website

Place this badge on your site to show you're featured and get a verified checkmark. Use the horizontal version in a footer, or the vertical version, which floats fixed along the side of your page.

Horizontal · Light
Horizontal · Dark
Vertical · Light
Vertical · Dark