One object instead of a list
ATOM Global is a technology holding and venture builder with nine companies across AI, blockchain and immersive tech, from Neuro Design to Biometric Suit. The client came with one request: show the ventures as a single atom, not as a list.
I turned that into a concept, led the design and art direction, and ran the build with my studio over four months: me, a second developer, a designer and a 3D artist. Pick a venture and the camera flies to it and opens its card; going back is the same flight in reverse.
The glass was the hard part
I wrote the front end in Next.js with Three.js and React Three Fiber, and worked out the WebGL side together with our 3D artist. Most of the time went into the glass: custom GLSL with multi-pass refraction, transmission, reflections and chromatic dispersion, on an object big enough to fill the screen.
I also did the animation and the sound. Camera moves, transitions, interface and audio play as one continuous sequence, closer to a film title than a corporate homepage.
Built to run on an ordinary phone
Refractive glass at that size is expensive, and the site still had to hold up on a mid-range phone. On load it measures the GPU and sets resolution, pixel density, materials, post-processing and model detail to match.
I compressed the geometry, gave the models several levels of detail, moved heavy assets after the first frame and wrote separate touch controls. A laptop and a cheap Android see the same scene; the phone just pays less for it.
Stack
