Nebula Drift

Inspiration

The boundless beauty of deep-space imagery from the James Webb Space Telescope inspired us to create a meditative digital escape. We wanted to capture the feeling of lying under a dark sky and watching the Milky Way swirl overhead—that quiet, overwhelming sense of wonder that makes you feel both small and infinitely connected to the universe. The goal was to prove that you don't need complex game mechanics to create awe; sometimes, just the elegant dance of light and color is enough to transport someone.

What it does

Nebula Drift is an immersive, interactive 3D particle universe that lives entirely in your browser. It generates over 6,000 glowing, color-shifting stars that form a flattened, swirling galaxy. As you move your cursor (or drag your finger on touch devices), the entire nebula rotates smoothly to follow your gaze, making you feel like you are piloting through a living cosmos. The particles pulse gently, mimicking the "breath" of a living nebula, creating a serene, hypnotic experience with no goals or scores—just pure exploration and visual poetry.

How we built it

We built Nebula Drift as a single, self-contained HTML file using Three.js (r160) for 3D rendering. The particle system was constructed using BufferGeometry with over 6,000 vertices, mathematically distributed in a flattened spherical disk to mimic a galaxy's structure. Each particle is assigned a unique color from a cosmic palette (magenta, cyan, violet, and pink) to create a vibrant nebula gradient. We used a custom Canvas-generated radial gradient as a sprite texture for soft, glowing "stars." Mouse tracking was implemented with smooth linear interpolation (lerp) to ensure fluid, lag-free rotations. The entire project was coded in vanilla JavaScript modules, with Google Fonts (Orbitron) adding a futuristic UI touch.

Challenges we ran into

The primary challenge was balancing visual density with performance. We started with 10,000 particles, but lower-end machines struggled to maintain 60fps—we optimized down to 6,000, which struck the perfect balance between lush visuals and silky performance. We also faced the hurdle of making the particle distribution look "organic" rather than like a rigid ball. By flattening the Y-axis and stretching the Z-axis using mathematical scaling, we successfully achieved that characteristic "flying-saucer" galaxy silhouette. Lastly, ensuring seamless touch support for mobile users required reworking our mouse-event listeners to handle touchmove events without breaking the desktop experience.

Accomplishments that we're proud of

We are incredibly proud of building a stunning, production-ready 3D experience in under two hours. The fact that the entire project—from the physics of the particle system to the responsive UI—fits into a single, portable HTML file feels like a huge win. Achieving a vibrant, emissive glow without relying on heavy post-processing (bloom) or external image assets was a creative triumph. Most importantly, we successfully evoked the desired emotion: every tester who moved their cursor across the screen instinctively smiled or let out a quiet "wow."

What we learned

This project reinforced the power of creative constraints. With limited time, we learned to prioritize aesthetic impact over feature bloat—polishing the color palette and motion curves was far more effective than adding complex interactions. We deepened our practical knowledge of Three.js' PointsMaterial and BufferGeometry, and mastered the art of using simple mathematical functions (sine, cosine, random distributions) to generate organic, natural-looking structures from pure code. We also learned the importance of graceful degradation, ensuring the experience remains smooth across varying device capabilities.

What's next for Nebula Drift

While minimalism is its strength, we see huge potential for evolution. Next, we plan to add multi-layered depth, introducing distant, slow-moving background stars and fast, bright foreground "shooting stars" to enhance the parallax effect. We also want to implement micro-interactions—such as particles bursting outward on a mouse click or creating temporary "gravity wells" that pull stars inward. Finally, we envision an audio-reactive mode, where the nebula pulses and shifts colors in sync with the user's microphone or a background music track, turning it into a fully immersive, meditative visualizer.