Cold, quiet, incomplete
An incomplete stone bridge introduces the missing connection. The goal: create curiosity and invite you to take part.
Intention · curiosity
Case study · personal interactive 3D website
THE BRIDGE
From an imagined world to an interactive web experienceI wanted a place that shows where I’m going. So I built a bridge between two worlds, and a way for you to cross it.
Start the crossing01 Origin · The idea
I want to move into the world I imagine.
A place where design, AI, storytelling and interactive experiences can all live together. I pictured a bridge hanging between mountains, leading to a Portal, with a different world waiting on the other side.
A bridge felt right because it makes connection visible. It has a beginning, a distance to cross, and a destination. An incomplete bridge adds one more question: how do we build the part that’s missing?
From there the project grew into a sequence of places that change as you move. The bridge rebuilds and evolves, a mechanical Gateway assembles, and the journey carries on into a futuristic Lab and Discovery Gallery.
The opening message
Every system starts as a gapbetween two things that should meet.Build it back.
Move across the gap to reconstruct it
StructureDisconnected
Span00%
CoordinatesX +00.00 / Y +00.00
The outlined stone blocks make the structure easy to read: the arches, the missing piece, how everything fits. The UI around it stays quiet. A big chapter title, a short line, one action, the chapter nav. The landscape gives scale, the text gives just enough to begin.
On the real site the bridge is part of a live 3D scene in the browser, so its state actually changes when you interact. Rebuilding it is part of the experience, not an animation you watch.
Phase 1 Giving the concept a structure
Before any material, the journey had to make sense.
I organized the world as a progression. The stone bridge matters later because you’ve already seen it broken. The Gateway shows the destination before you get there. And a dramatic Portal would feel empty if the story ended right after it.
Incomplete connectionThe stone bridge with a gap
TransformationStone becomes titanium and energy
CrossingThrough the Quantum Gateway
ArrivalThe pathway into the Lab
This also became my filter for new ideas: does this support the journey, or is it just another impressive object?
Role Who did what
I directed the experience. Claude Code helped build it.
I decided what each chapter should say, how the camera reveals the space, and how materials and light change along the way. Then I reviewed screenshots, compared versions and gave focused feedback. Sometimes that meant a big atmosphere change. Other times it meant protecting something that already worked.
Me · Yuya Mei
- Concept + narrative
- Experience design
- Visual + creative direction
- Reviewing every pass
- What stays, what changes
Claude Code
- Implementation
- Shaders + scene code
- Regression checks
- GPU measurements
- Git checkpoints
Protected on purpose: the Gateway’s assembly animation (I loved it) and the pathway’s architecture. I improved what surrounded them instead of redesigning them.
02 Evolution · Two sets of phases
Six chapters to walk. Nine phases to build.
There were two structures: the chapters visitors experience, and the development phases I used to build them. Tap either row to see how they connect.
Visitor chapters
Build phases
01Origin
Scroll timeline · 0.00
Stone turns to metal
The bridge starts taking on futuristic materials and energy. Transformation becomes something you can see, in an object you already recognize.
Intention · visible changeYour scroll is the camera
Scrolling moves the camera forward while the world changes around you. Every visual state is tied to a spot on the scroll timeline, so scrolling back restores exactly what you saw. Try it.
Intention · anticipationThe threshold
The Computing Towers and Quantum Gateway take over. The camera decides when the Gateway becomes dominant and when the destination is revealed.
Intention · reveal the thresholdA clear arrival
A structured pathway leads into the Lab. Repeating frames make forward movement easy to feel, and the Holographic Chamber waits at the end.
Intention · clear arrivalRoom to explore
The journey opens into a gallery. After all that scale and movement, attention shifts to looking around and finding what’s next.
Intention · exploration
03 Crossing · Phase 4
Keep the destination in sight.
The Portal is a 3D mechanical ring with a future-world image inside the opening. Warm light, mountains, clouds and distant towers set the mood before you arrive. Then an image dissolve carries you into the New World. Keep scrolling.
The Gateway is the central visual event. Its assembly gives the crossing a sense of preparation, and the four Computing Towers suggest a bigger system around it.
I wanted it to feel substantial: surfaces with weight and mechanical depth, an illuminated inner edge that suggests energy. Once the assembly and camera sequence felt right, I treated them as protected parts of the design.
The ring
Frames the view.
The view
Creates anticipation.
The camera
Brings you closer. How they work together matters more than how complex any one part is.
1Mechanical ring that assembles
4Computing Towers
6Visitor chapters
9Build phases
04 Transit · Phase 5 · Atmosphere
“I can barely see the difference.”
That before-and-after moment was one of the most useful in the whole project. The first material pass was technically done, but the scene still felt uniformly gray.
Blue hour
Too grayBlue hour
Illustration: a filter on the final render, to show the idea
Bridge, ring, towers and mountains all had similar brightness, while the world inside the Portal had more color and depth than everything around it. That clarified the real problem: tweaking a few metal surfaces wasn’t going to be enough. Sky, terrain, light and atmosphere had to change together.
So the later chapters moved to a blue-hour palette with a warm horizon.
The opening stays cold and restrained. The richer colors belong to the transformation, so the world feels like it’s slowly waking up. This page does it too: scroll back to the top and it’s a little colder.
Foreground cliffsDeep navy shadows
Weight and a clear foreground.
Mountain layersCool slate blue, fading
Makes distance easier to read.
HorizonRestrained peach-gold
Ties the outside to the warmth in the Portal.
Evolved bridgeDark blue-gray titanium
Sets it apart from the old stone.
Energy detailsIcy blue + white
Pulls the eye to active parts.
Mechanical surfacesDark armor, silver highlights
Readable against the landscape.
Phase 6 Giving the materials definition
Early pass · faces stay pale
Judge it from
The plate that taught me where to look.
An edge-highlight effect was spreading across the Gateway’s small plates, keeping their faces pale even after the material underneath had been darkened. Turning that highlight down let the intended contrast finally show. Slide it down, then switch to visitor distance.
Most of this happens in shaders: small programs that decide how a surface reacts to light. For the Gateway I directed three layers:
- Dark titanium outer armorDarker recesses separate neighboring parts.
- Satin-silver middle structureControlled highlights keep edges readable.
- Icy-blue inner ringThe illuminated edge of the Portal.
The towers follow the same idea: a concentrated glowing core inside a darker structure.
My review rule
Judge the result from the visitor’s actual camera distance.
05 New World · Phase 7 · Arrival
A composed space after the crossing.
Repeated rectangular frames, a central walkway and circular ceiling structures guide you toward the Holographic Chamber. I liked this layout early on, so I left it alone.
Some frames recede, some guide the eye.
The floor became dark titanium with controlled reflections and visible panel lines. Thin edge lights reinforce the path, selected ceiling lights add rhythm overhead, and the chamber is the focal point at the far end. Flip the diagram to compare.
What I leaned on
Glowing surfaces and existing lighting. A glowing strip gives a strong visual cue.
What I avoided
Lots of new dynamic lights. Making nearby surfaces look truly lit takes extra work, and the browser pays for it.
Discovery Gallery
Tap a glowing point
The Lab is where the journey settles. Floating panels hold my other projects, and the chamber in the middle is saved for something next.
05 / Design + technologyA human presence
Designing a human presence from light.
After the scale and movement of the crossing, I wanted a quieter encounter. At the center of the Lab, a monumental female figure takes shape inside a holographic chamber. She brings the experience back to something personal: the person behind the world.
Visual direction · the Holographic ChamberExplore the three layers below ↓
A human form before the effects.
I first explored procedural geometry and particles in Three.js. But the same simple shapes that work for architecture can make a person feel robotic. More glowing points wouldn’t solve the underlying problem: the figure needed a believable silhouette.
Structure first. Then light.
I chose a high-quality female 3D mesh, a particle hologram shader, and luminous wireframe. The mesh gives me natural proportions and a recognizable face. The other layers transform that foundation into a digital presence without losing its humanity.
Enough light to reveal. Enough shadow to feel.
Fine contours, wireframe details, and scanning lines trace the figure in icy blue and white. I keep darker areas within the form so the face and body retain depth. Orbital rings connect her visually to the chamber’s larger energy system.
The intended activation
Coming into existence.
- 01 · GatherA quiet chamber. Small points of light begin to collect.
- 02 · RevealThe silhouette, face, and shoulders become recognizable.
- 03 · IlluminateFine digital lines and orbital energy rings activate.
- 04 · WelcomeThe figure settles. “Welcome to my world.”
How I’m bringing it to the browser.
The planned implementation uses Three.js to place and render the mesh. GPU particles follow its surface, while custom GLSL shaders control their brightness, transparency, and movement. Scroll-driven animation ties the activation to the visitor’s arrival.
Clarity is the real constraint.
The goal isn’t the largest particle count. It’s a figure you can read while the whole Lab stays responsive. I’m designing the layers with adjustable detail, fewer particles on lower-powered devices, and a simplified lighting treatment that preserves the silhouette.
Why this moment matters
The Bridge begins with a missing connection. Visitors rebuild it, cross into an unfamiliar world, and watch technology reshape their surroundings. At the center of that new world, I wanted them to encounter something human.
Technology creates the world.
Human imagination gives it meaning.
06 Discovery · Phase 8 · Collaboration
Better briefs, better passes.
My briefs got more specific over time. I’d describe the visual problem, the result I wanted, and what must not change.
Brief to Claude Code
01Inspect the current result
02Find the most important problem
03Define a bounded change
04Implement it
05Compare the same view before / after
06Check existing behavior still works
07Save it as a checkpoint
Staying in the visual decisions.
Separate Git checkpoints kept the environment, pathway materials, ceiling lighting and final Gateway pass manageable, and made it clear which changes belonged together.
The collaboration worked best when I stayed involved. Implementation feedback could tell me if a change worked technically. Only I could decide if it achieved the experience I meant.
Checkpoint history · where it stands
- Blue-hour environmentCheckpoint · Phase 5Done
- Pathway materialsCheckpoint · Phase 7Done
- Ceiling lightingCheckpoint · Phase 7Done
- Gateway + tower materialsBuilt · visually reviewed · validatingIn progress
- Real-phone testingPhase 9Pending
- DeploymentLaunchPending
Toolkit Techniques behind the experience
Nine techniques, one job each.
Phase 9 Validating the whole thing
A beautiful frame is only part of a website.
It also has to load, move consistently, handle different screens and keep its interactions after every visual change. So validation runs alongside development.
- Scroll timeline + camera
- Chapter transitions
- Gallery behavior
- Loading
- Resource use
Protecting the opening
Image comparisons catch unintended changes to Origin when shared rendering systems get adjusted later in the journey.
Measuring Transit
Transit is where the most heavy visuals appear together. The latest material pass waits on real GPU measurement instead of assuming a small code change costs nothing.
Still to learn
It’s in development, so there are no audience results yet. Real-phone testing and deployment come next.
Takeaway What this project taught me
Turning a feeling into a specific design decision.
The feeling“Entering a new world”
BecameA sequence of spaces
The feeling“The scene feels flat”
BecameMountain layers, sky color, material contrast
The feeling“The pathway needs more life”
BecameA focused lighting pass
It also made me more deliberate about what to keep. When the camera move or the architecture was working, I could build on it instead of redesigning everything around it.
Next One decision at a time
I can see the world taking shape.
What I have now is a working journey that gives physical form to the idea I started with. I want visitors to feel that sense of possibility as they cross into it.
Future phase
A personal welcome. After the scale of the bridge and Portal, you’d reach a quieter space and meet the person who imagined it: a human presence built from a high-quality female 3D mesh, a particle hologram shader, and luminous wireframe. The mesh gives her a believable form; particles and fine lines turn that form into light. This is the direction I’m developing for the chamber’s next phase.
The Bridge · personal interactive 3D websiteConcept, experience design + creative direction: Yuya MeiDevelopment collaboration: Claude Code