-
-
intro
-
portal
-
memories
-
worlds
-
valley
-
peak
Inspiration
VOIDVERSE was inspired by one simple question:
What if a website felt like a place instead of a page?
Most websites are designed around scrolling through sections, clicking buttons, and reading content. We wanted to challenge that idea and create something that felt less like browsing a website and more like entering an unknown world.
The concept was inspired by deep-space exploration, dimensional portals, forgotten civilizations, mysterious artifacts, alien landscapes, and cinematic science-fiction environments.
Instead of simply presenting a fictional universe, we wanted the visitor to travel through it, interact with it, and discover it.
That idea became VOIDVERSE — a cinematic interactive 3D experience where the environment itself becomes part of the interface.
What it does
VOIDVERSE is an immersive browser-based 3D exploration experience built around five connected chapters:
- Portal — a gigantic dimensional gateway that introduces the VOIDVERSE.
- Memories — a mysterious archive containing interactive dimensional artifacts.
- Worlds — a miniature cosmic system containing unique procedural planets.
- Valley — a massive alien canyon filled with crystals, energy streams, floating formations, and atmospheric effects.
- Peak — the final destination, where a gigantic mountain leads back to a mysterious final portal.
Users can navigate through the chapters using the mouse wheel, keyboard controls, touch gestures, or the on-screen navigation.
Within the environments, users can interact with objects by hovering, clicking, or tapping them. Artifacts and worlds can be selected to trigger visual responses, camera movement, and contextual information.
The experience is designed so that the 3D environment is not simply a background — it is the navigation system itself.
The five chapters form a continuous visual journey:
Discovery → Memory → Exploration → Descent → Ascension
How we built it
VOIDVERSE was built using:
- React
- React Three Fiber
- Three.js
- @react-three/drei
- Vite
- CSS
The application uses a single persistent React Three Fiber Canvas that remains mounted throughout the entire experience.
React handles the application state, chapter navigation, object selection, transitions, UI, and responsive behaviour.
React Three Fiber provides the bridge between React and Three.js, allowing the entire 3D universe to be created and animated directly inside the application.
The environments are constructed using procedural geometry rather than external 3D models.
We created the Portal using layered rings, mechanical components, fractured geometry, emissive surfaces, particles, and a dimensional core.
The Memories chapter uses multiple procedural artifacts with different silhouettes and material properties.
The Worlds chapter creates layered planetary systems using procedural geometry, atmospheres, rings, moons, and orbital elements.
The Valley and Peak environments use procedural terrain, rocks, crystals, floating formations, energy streams, particles, fog, and atmospheric depth to create a large-scale alien environment.
We also built cinematic transitions so that moving between chapters feels like travelling through the same universe rather than switching between separate web pages.
Challenges we ran into
Making procedural 3D feel handcrafted
One of the biggest challenges was creating interesting environments without relying on external 3D models.
Simple primitives can quickly make a scene feel like a technical demo, so we combined multiple layers of geometry, transformations, materials, particles, and asymmetry to create more complex silhouettes.
Making one Canvas handle an entire universe
VOIDVERSE contains five very different environments, but the application uses one persistent Canvas.
The scene system had to switch between Portal, Memories, Worlds, Valley, and Peak without recreating the WebGL renderer.
This architecture was important for maintaining stability while navigating through the experience.
Creating cinematic transitions
Instantly replacing one scene with another would make the experience feel like a normal website.
Instead, we wanted the user to feel that the camera was physically travelling through the universe.
Transitions therefore combine camera movement, scaling, rotation, particles, energy effects, and fading to connect the chapters.
Balancing visual quality and performance
Real-time 3D can become expensive very quickly.
Particles, procedural geometry, transparent materials, lighting, animations, and environmental details all compete for GPU resources.
We addressed this by using reusable geometry and materials, device-aware rendering quality, reduced particle counts on mobile, limited lighting, and ref-based animation where possible.
Creating atmosphere without expensive volumetric rendering
We wanted the environments to feel deep, mysterious, and cinematic without relying on heavy volumetric effects.
Fog, transparent geometry, particles, emissive materials, layered environmental elements, and carefully positioned lighting were combined to create the appearance of atmospheric depth.
Keeping five environments visually connected
Each chapter needed its own identity while still feeling like part of the same universe.
Recurring elements such as dimensional energy, fragments, crystals, particles, rings, glowing surfaces, and atmospheric effects help connect the scenes together.
Accomplishments that we're proud of
We're proud that VOIDVERSE became more than a collection of 3D scenes.
The biggest accomplishment is that the environment itself became the interface.
Instead of navigating traditional webpage sections, users can:
- Enter a dimensional portal
- Explore interactive artifacts
- Select and inspect mysterious memories
- Discover different procedural worlds
- Travel through a gigantic alien valley
- Follow energy streams toward the summit
- Experience a final cinematic portal
We're also proud that the experience was created primarily through code and procedural techniques instead of depending on pre-rendered scenes or external 3D models.
The result is a browser-based experience that feels closer to a small interactive science-fiction world than a conventional website.
What we learned
The biggest lesson was that designing a 3D website requires thinking about space rather than just layout.
A traditional website can be thought of as:
section → content → button → navigation
A 3D experience requires thinking about:
camera → space → object → movement → lighting → interaction → interface
Building VOIDVERSE helped us understand how React state, Three.js geometry, React Three Fiber, pointer events, camera systems, procedural animation, particles, materials, lighting, and responsive rendering can work together as one experience.
We also learned that visual complexity alone does not make a 3D experience successful.
Every effect needs a purpose.
The camera movement should guide the visitor. Lighting should establish mood and focus. Particles should create atmosphere. Interactive objects should communicate that they can be explored.
Most importantly, the user should always feel that there is something worth discovering.
What's next for VOIDVERSE
VOIDVERSE is only the beginning.
The next stage could expand the project into a much larger browser-based universe with:
- Procedurally generated planets
- Fully explorable planetary surfaces
- Spatial audio
- Dynamic weather and environmental systems
- Interactive alien civilizations
- Deeper narrative systems
- Persistent discoveries
- More dimensional artifacts
- Additional worlds and environments
- Shareable chapter locations
- WebXR / VR support
- More advanced procedural terrain
- User-generated worlds
- Multiplayer exploration
The long-term vision is to transform VOIDVERSE from an experimental cinematic website into a persistent browser-based universe that users can continuously explore, discover, and return to.
Don't just browse the void. Enter it.
Log in or sign up for Devpost to join the conversation.