The Brief
NyxCarbon needed to explain the carbon market to people who did not already speak its technical language.
The subject contains processes, participants, and stages that are difficult to make intuitive through a conventional landing page. The project needed to educate without feeling like a report, and feel ambitious without allowing the visual layer to obscure the message.
At XELEVEN, I built the browser experience for Sadu.earth as a scroll-led journey through a series of 3D islands. Each environment represents a different part of the carbon-market story and gives the user a physical way to move through the explanation.
The Communication Problem
Carbon trading is abstract. Its systems operate through markets, measurement, verification, and exchange, but most of those mechanisms have no obvious physical form.
A text-only page could describe the process accurately while still failing to create a useful mental model. A cinematic animation could create atmosphere but leave the user passively watching instead of learning at their own pace.
The design challenge was to combine clarity, agency, and spectacle: turn the content into places, let scrolling control the rhythm, and keep the information understandable as the world changed around it.
Turning a Process into a World
The central idea was a sequence of virtual islands. Rather than using one generic environment as a background, each island carries a particular stage of the educational narrative.
That structure allowed the project to translate an invisible market into a progression users could see and remember. Moving to the next subject also meant moving to the next place, creating a stronger relationship between the explanation and its visual context.
The 3D work was created by Stacie Ant, whose environments gave the experience its depth, material character, and sense of scale. My role was to turn those assets into a functioning interactive product in the browser.
Building the Scroll Experience
I implemented the experience with Three.js, React Three Fiber, React, and Next.js. The application connected page progress to the 3D narrative so the user controlled when the world advanced rather than watching a fixed-duration film.
The React layer managed interface content and application state, while React Three Fiber connected that state to the Three.js scene. This made the 3D sequence and the surrounding page behave as one product instead of two layers competing for control.
Scroll-driven work requires careful pacing. Camera movement, environmental changes, copy, and user input have to remain synchronized across different screens and input devices. I tuned those transitions so each island had enough time to establish itself before the experience moved on.
Keeping Ambition Inside the Browser
Detailed 3D environments create immediate pressure on download size, rendering cost, and responsive behaviour. The experience still had to load as a website and remain usable outside a high-end desktop setup.
Next.js provided the surrounding application architecture, while the real-time layer was treated as a performance-sensitive system rather than a decorative embed. The scene, interface, and transitions were designed to work together without allowing the 3D content to make the page feel unresponsive.
That balance is central to my creative-development work: preserving the intent of the art while making the engineering decisions required for people to experience it through an ordinary browser.
The Outcome
NyxCarbon became an educational experience in which the visual world carries the explanation rather than merely illustrating it.
Users move through the stages of the carbon market as a sequence of environments, controlling the pace through a familiar browser interaction. The result gives an abstract subject a memorable sense of progression and place.
The project demonstrates how I work with artists and subject matter experts: I can take a strong visual concept, build the application architecture around it, and turn complex 3D assets into a coherent, responsive product that serves a communication goal.