The Brief
XELEVEN was my metaverse, Web3, and digital-art studio. Our internal principle was simple: make the internet less boring.
The studio’s own website could not communicate that ambition through a conventional sequence of hero copy, service cards, and project thumbnails. It needed to demonstrate the work before asking visitors to believe in it.
I built the site as an interactive Three.js journey where scrolling controls movement through a cinematic 3D world.
The Problem with a Passive Film
The source material had the richness of an animated short, but placing a video on a webpage would have turned the visitor into a spectator.
A website still needs navigation and agency. People move forward, reverse direction, pause, and change pace. A fixed animation timeline does not naturally understand any of those behaviours.
The development challenge was to preserve the timing and atmosphere of the film while allowing an unpredictable browser interaction—the user’s scroll—to become its playback system.
Building the World Together
I developed the concept with 3D artist Stacie Ant. She created the animated character and world, giving the experience its visual identity and dreamlike movement.
My role was to turn that authored animation into an application. I brought the 3D scene into the browser with Three.js, connected it to the page, and designed how visitors would move through it.
The collaboration required the asset and code to support the same experience. The animation could not remain a sealed film, and the interface could not treat the world as a generic background.
Turning Scroll into a Timeline
I mapped page progress to the animation timeline so that scrolling forward advances the sequence and scrolling backward reverses it.
This changes the nature of the experience. Visitors determine the rhythm, can linger inside a moment, and can revisit part of the world without searching for media controls. A familiar web gesture becomes direct control over a cinematic environment.
The work was in the relationship between input and motion. Scroll distance, animation progress, and camera behaviour had to remain synchronized closely enough that the world felt responsive rather than like a video struggling to catch up.
Creating a Directed Camera That Still Felt Alive
Following the authored animation exactly produced movement, but the camera risked feeling mechanically attached to a scrubber.
I added a trigonometric side-to-side drift that subtly offsets the camera as the sequence progresses. The motion creates a floating, dreamlike quality without taking control away from the user or changing the underlying narrative path.
That small system captures an important part of my approach to creative development: mathematical motion is useful when it supports an emotional effect, not simply because movement can be added.
The Outcome
The completed site turned XELEVEN’s positioning into the interface itself. Visitors did not need to read that the studio built immersive digital experiences; they encountered one immediately.
The project joined a custom 3D world, an authored character animation, browser input, timeline control, and procedural camera movement into one continuous experience.
It also established an approach that became central to my later work: treating scroll not as a way to move past content, but as a high-resolution input for directing real-time graphics and narrative systems in the browser.