↑ Move your cursor over the logo
The Etelier Gallery unlock screen is the first thing every visitor sees before they know if they have access, before any product appears. For a brand whose entire identity is built on scarcity and deliberate exclusion, that screen needed to carry weight. It couldn't just hold a password field. It needed to communicate what the brand was.
The solution was a 3D rendering of the Etelier logo using the brand's own initials as the visual material. 5,000 particles sampled from the logo's geometry, each rendered as an E or G character. Approach the logo and the particles scatter. Step back and they return. The physics are tuned to feel deliberate like something that has been disturbed and is deciding whether to let you back in.
The logo exists as a GLB file a 3D mesh loaded at runtime via React Three Fiber's useGLTF. Rather than rendering the mesh directly, we sample point positions from its surface geometry and use those as the rest positions for 5,000 independent particles.
Each particle stores a home position (sampled from the geometry), a current position, and a velocity. On each frame, a spring force pulls the particle toward home. Damping bleeds off velocity. The result is a swarm of particles that collectively trace the logo's shape individually noisy, collectively precise.
DESIGN DECISION
Character set as brand material
The ASCII characters are " EG"space, E, and G. Etelier Gallery's own initials. The logo renders itself from its own name. The typography is the texture.
Passed directly to three-stdlib's AsciiEffect renderer
The cursor repulsion is computed per-particle each frame. When the cursor enters a radius of 3 units around a particle, a force is applied in the direction away from the cursor magnitude scaled by proximity. The spring and damping constants determine how the particle recovers: too stiff and the return is mechanical, too loose and it wanders.
The tuning target was "deliberate and slightly resistant." Not snappy. Not playful. The logo should feel like it notices the intrusion and chooses its response. Spring at 0.04, damping at 0.87 arrived at by feel, not formula. The numbers serve the experience, not the other way around.
The scene renders in Three.js via React Three Fiber, with three-stdlib's AsciiEffect as a post-processing pass. AsciiEffect replaces each rendered pixel block with the closest matching ASCII character the character set determines what textures are possible.
Two animated light sources orbit the scene on a slow cycle, producing the subtle shading variation that gives the logo depth. Without the lighting variation, the ASCII field reads as flat. The lights make it feel three-dimensional without ever resolving into a conventional 3D object.
The whole component is dynamically imported with ssr: false Three.js requires window, and the WebGL context only exists in the browser. The server never touches it.