É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 / color 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 favor of a compact wordmark, letting the images own the center 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.
Gallery
Click to enlargeFAQ
How is a 3D interactive website different from a regular one?
It runs Three.js and WebGL in the browser, so objects move and respond to the cursor and scroll. A regular site organises information; an interactive one delivers the brand as an experience. It pays off most in fashion, beauty, architecture and exhibitions.
How long does a website take to build?
Seven days for a landing page, fifteen for a five-page company site, thirty for a ten-page 3D interactive build. The clock starts when your material arrives and shifts with design feedback. If a date is fixed, say so at the first call and feasibility is checked first.
Are hosting, domain and server costs separate?
SSL certificate, hosting setup and database provisioning are included at no cost. You only pay for the domain, about ₩20,000–30,000 a year. Accounts are created in your name from the start, so nothing lapses when staff change.
Can I edit the content myself after launch?
An admin page is built alongside the site, so text, images and posts can be edited without development knowledge, and a manual is handed over at delivery. Only structural changes or new features need development.