-
-
Start Screen - Close your eyes - Make a Wish
-
Enter your Wish and Release
-
Stars - Universe
-
End Screen
-
Bright Light
-
Enter WishVerse
-
Wish become star
-
Glass Rod
Inspiration
We wanted to create something that feels less like a traditional website and more like a small digital experience.
The idea behind WishVerse came from a simple thought: What if making a wish could feel like releasing something into the universe?
Instead of presenting users with a conventional form, we wanted their wish to become part of an evolving 3D world. This led us to build a cinematic journey where darkness transforms into light, a constellation appears, the user enters a glowing universe, makes a wish, and finally watches that wish become a star.
Our goal was to make something memorable through atmosphere, interaction, animation, sound, and storytelling.
What it does
WishVerse is a cinematic, single-page 3D web experience centered around the act of making a wish.
The experience takes the user through three acts:
Act 1 - The Awakening
The experience begins in darkness with the message "close your eyes." Stars and particles slowly appear, followed by a golden light, an animated constellation, and a glowing glass sphere.
Act 2 - The Wishing Field
The user enters the sphere and discovers a cosmic environment containing hundreds of glowing wish orbs and a procedural bioluminescent wish tree.
The user can write their own wish. WishVerse analyzes keywords in the text and dynamically maps the wish to an emotional color, changing the visual appearance of the wish interaction.
Act 3 - The Release
When the user releases their wish, it becomes a glowing orb that rises through the universe. Particles burst around it while stars gradually settle into the surrounding space.
The journey ends with a cinematic panoramic scene and the message:
"your wish has been released."
"among the stars,"
"it now belongs to the universe."
The experience is designed to take only a few minutes, but leave the user with a sense of completion and wonder.
How we built it
WishVerse was built as a modern 3D web experience using React, TypeScript, Vite, and React Three Fiber.
The main technologies and systems include:
- React + TypeScript for the application architecture
- React Three Fiber + Three.js for the 3D world
- GSAP for cinematic camera movements and scene transitions
- GLSL shaders for glowing wish orbs, atmospheric effects, and the aurora
- Zustand for managing experience, wish, audio, and interaction state
- Web Audio API for procedural ambient sounds and interaction effects
- CSS animations for the interface and typography
- Vite for development and production builds
The experience is organized into three acts with individual scenes controlled by a central scene-management system.
Many of the visual elements are generated procedurally rather than relying on large external 3D assets. This allowed us to create the stars, particles, wish orbs, atmospheric effects, and parts of the wish tree directly in the browser.
We also used instanced rendering for the large collection of wish orbs and custom shaders to give the environment its glowing, dream-like appearance.
Challenges we ran into
The biggest challenge was making a large number of animated 3D elements work together without making the experience feel chaotic.
We had to carefully coordinate:
- Camera movement and scene transitions
- Hundreds of interactive glowing orbs
- Particle animations
- Dynamic lighting and fog
- Post-processing effects
- Wish classification and visual feedback
- Procedural audio
- UI overlays on top of the WebGL canvas
Another challenge was balancing visual quality with browser performance. A 3D experience can become expensive very quickly when particles, shaders, lighting, post-processing, and interactions are all running simultaneously.
We also encountered several integration issues while connecting the different scenes and animation timelines. Debugging these transitions taught us how important lifecycle management and cleanup are when combining React with GSAP and Three.js.
Accomplishments that we're proud of
We are most proud of turning a simple idea - make a wish - into a complete interactive visual journey.
Some highlights include:
- A complete three-act cinematic experience
- Hundreds of animated interactive wish orbs
- A procedural glowing wish tree
- Custom GLSL visual effects
- Animated constellation generation
- A glass sphere used as the transition between worlds
- Dynamic wish-to-color classification
- Procedural Web Audio effects without relying on external audio files
- Cinematic camera movement and scene transitions
- A final panoramic universe with an aurora effect
- A responsive web experience designed for both desktop and touch interaction
Most importantly, we focused on making the experience feel intentional rather than simply adding 3D elements for the sake of using 3D.
What we learned
Building WishVerse taught us that creating a good 3D web experience is not only about rendering impressive graphics.
The timing of an animation, the movement of a camera, the transition between scenes, the placement of a single light, and even a few seconds of silence can dramatically change how an experience feels.
We also learned a lot about combining React's component-based architecture with Three.js rendering, GSAP animation timelines, custom shaders, Web Audio, and centralized state management.
The project also reinforced the importance of performance optimization and designing interactions around the user's journey rather than around individual technical features.
What's next for WishVerse
WishVerse currently focuses on the core wishing journey, but there are several directions we would like to explore next.
Future improvements could include:
- More hidden interactive easter eggs
- A constellation generated from users' wishes
- A persistent personal collection of released stars
- Improved mobile and gyroscope interactions
- More sophisticated wish classification
- Social sharing of individual wishes
- Additional cosmic environments and stories
- More accessibility and reduced-motion support
The long-term idea is to turn WishVerse from a single experience into a small interactive universe where every wish can leave a visual trace.
Log in or sign up for Devpost to join the conversation.