ÉTUDE
DESCRIPTION
Interactive WebGL Photography Exhibition
DURATION
May 2026 - Jun 2026
MY ROLE
- Creative Developer: react-three-fiber gallery engine, custom GLSL shaders, and GSAP transition choreography.
- Art Director: editorial serif system, dark exhibition direction, and the fictional photographer's identity.
- Performance: adaptive DPR, hover/render decoupling, and mobile tuning for ad-driven traffic.
TECH
React · TypeScript · Vite
Three.js · react-three-fiber · GLSL (Shaders)
GSAP
Vercel
Project Purpose
"An interactive exhibition for a photographer's black-and-white studies." ÉTUDE is an interactive WebGL exhibition site for the Paris-based photographer Noa Vidal. Photographs float in a three-dimensional gallery the visitor can rotate, scatter, and rearrange — Ring, Sphere, Flower, and Constellation layouts — before selecting a plate to view. The result reframes an online photography archive as a spatial, tactile experience rather than a scrolling grid.
Scope
- · Interactive Web Design & Development
- · WebGL 3D Gallery System (react-three-fiber)
- · Custom Shader Work (grayscale, depth fog, hover)
- · Editorial Art Direction & Typography
Key Technical Features
3D Gallery Layout System
- · Photographs arrange into four switchable formations — Ring, Sphere, Flower, and a Constellation scatter with drag-to-pan parallax and connecting threads to a central crosshair.
- · One shared engine drives every layout; cards float with per-card bobbing and depth-based fog so distant plates recede into the dark.
Spatial Navigation & Detail View
- · Selecting any plate gathers the field into a ring, spins once, and flattens into a horizontal row for browsing.
- · A frosted detail overlay slides in with the plate's title and year, respecting the site's silver / colour toggle.
Editorial Dark Gallery Direction
- · A Fraunces serif system in warm off-white over deep charcoal frames the work like a gallery at night, letting silver-gelatin tones glow.
- · A session-gated loading intro reveals the space with a curtain, paced by real asset-load progress.
Design Points
Photographs as the Hero
The oversized masthead was removed in favour of a compact wordmark, letting the images own the centre of the screen and rotate as the primary subject.
White Cube, Inverted
Rather than a bright gallery wall, a deep charcoal ground makes the black-and-white plates luminous — matching the moody, cinematic tone of the campaign feed.
Motion with Weight
GSAP easing choreographs every transition — chewy layout morphs, a single deliberate spin, and staggered assembly into the viewing row.