§ Case 01 — WebGL · Creative Direction
AuraVoid2027
An ambient WebGL world built around a single noise field — pressure, depth, and reflection driven entirely by GLSL. v2 introduces a tactile, physics-aware cursor that pulls the field into local minima.
Year
2027
Role
Creative Direction
Stack
Three.js · GLSL
Award
Awwwards · Site of the Day
Case 01 · 2027
WebGL · Creative Direction
01 · Brief
Aura Void — brief
Aura asked for a website that would feel like a place rather than a page — somewhere a viewer could sit inside the brand for sixty seconds without scrolling and still feel like the visit was worthwhile. v1 was a static reel; v2 had to be physical.
02 · Approach
Approach
Everything visual is one fragment shader sampling a 3D noise field. The cursor is treated as a soft body with mass and drag — it pulls the field into a local minimum, reflective metals re-light, and the camera reacts a beat behind. No image assets, no DOM overlays.
03 · Solution
Solution
A single 1.4 kB GLSL program ships the entire experience. We added a 'serene mode' that decays cursor influence to zero after eight seconds, so the field is alive but never frantic. The hero loop is 12 seconds; nobody has noticed it loops.
◊ Gallery
Selected frames
Click any image to enter the lightbox. Use ←/→ to step through, Esc to close.
◊ Numbers
98
Lighthouse
1.4 kB
GLSL size
9.2 ms
Frame budget
1m 34s
Avg. dwell
◊ Deliverables
- 01Custom GLSL fragment shader (1.4 kB minified)
- 02Three.js orchestration layer + Lenis smooth scroll
- 03GSAP-driven cursor physics + camera follow
- 04Calmer-motion mode honouring prefers-reduced-motion
- 05Static export (Next.js 15) deployed to the edge
- 068-page editorial set: Index, About, Process, Contact, 4 case studies
04 · Outcome
Outcome
Average dwell time on the landing scene rose from 11 s (v1) to 1 m 34 s (v2). The site won Awwwards SOTD in week one, then FWA the following month. Conversion to the contact route doubled.
The site doesn't sell our brand — it is our brand. Watching people stop and play with it for two minutes before reading a word is exactly what we hoped for.
◊ Stack
Three.js
GLSL
GSAP
Lenis