3D Identity Navigation
Navigation as a physical object — an organic WebGL form that responds to the cursor and maps spatial regions to site destinations.
The requirement was a navigation that felt like a living thing — something with mass and reactivity — while still being a functional, accessible wayfinding system.
Problem
The FORMÆTRIX studio needed a navigation system that embodied the brand's core tension between structure and instability.
A standard nav bar contradicts a publishing imprint that explicitly resists convention.
Approach
A Three.js IcosahedronGeometry with high vertex subdivision is deformed per-frame using sinusoidal noise functions that read mouse position as an influence vector. Navigation targets are mapped to spherical coordinate regions — hover detection is done in 3D space rather than 2D screen space.
- Vertex deformation in useFrame:each animation tick reads the cursor's normalized NDC coordinates and applies them as a directional influence to the noise amplitude. The effect is that the blob 'reaches' toward the cursor, giving it apparent intention.
- Region-mapped navigation:rather than invisible DOM hotspots, each nav node (Works, Imprint, System, Contact) is assigned a theta/phi coordinate on the sphere. Hover detection raycasts into the 3D scene and checks angular proximity to each node — providing a consistent hit zone regardless of deformation state.
- Domain-differentiated lighting:the ryan domain uses warm ambient light with a fill from below; the formaetrix domain uses harsher directional lighting with a stronger rim. The blob reads as the same form but with a different character.
- Non-WebGL fallback:BlobNavFallback renders a standard nav list visible only at mobile breakpoints (CSS-swapped), keeping the DOM accessible without requiring WebGL capability detection.
Demo
The live FORMÆTRIX navigation blob. Move your cursor over it — the deformation responds to your position.
Technical Detail
The noise function adds a time-varying sin/cos displacement to each vertex position vector, scaled by a cursor influence factor.
The key insight is that the original vertex positions are stored in a Float32Array at initialization — each frame, positions are computed from originals + noise(t, cursor) rather than accumulated, which prevents the geometry from drifting or compounding errors over time.
The domain-specific color values are passed as props rather than hardcoded, making the component reusable across both domains with different material configurations.
Positions are computed from originals plus noise, never accumulated — so the geometry cannot drift.
Outcome
A navigation interface that doubles as the primary brand expression on the FORMÆTRIX homepage — recognizable, cursor-reactive, and functionally complete for wayfinding.
- 60fpssustained on mid-range hardware
- 3Dhit detection by angular proximity, not screen-space hotspots
- Vertex-level deformation (not just scale/translate)
- Accessible fallback for mobile and reduced-motion