3D Identity Navigation

Navigation as a physical object — an organic WebGL form that responds to the cursor and maps spatial regions to site destinations.

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. The requirement was a navigation that felt like a living thing — something with mass and reactivity — while still being a functional, accessible wayfinding system.

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

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.

Outcome

A navigation interface that doubles as the primary brand expression on the FORMÆTRIX homepage — recognizable, cursor-reactive, and functionally complete for wayfinding.

60fps on mid-range hardware
Vertex-level deformation (not just scale/translate)
3D hit detection with angular proximity thresholds
Accessible fallback for mobile and reduced-motion