Inspiration

🧠 About the Project: Inside The Human Brain

💡 Inspiration

The human brain contains roughly 86 billion neurones interconnected by over 100 trillion synaptic pathways. It's a biological cosmos as vast and mysterious as the universe itself.

The more I thought about that... the more one question kept pulling me in:

What if you could actually step inside your own mind?

What if you could navigate through memory engrams, experience the hidden architecture of your brain, and listen to the silent monologues of your subconscious?

That curiosity became **inside the human brain.

We set out to create an immersive WebGL 3D cognitive drift engine that bridges real-time procedural graphics, generative Web Audio binaural soundscapes, and Google Gemini AI to transform personal human memories into a cinematic digital voyage.

Not just to visualise the brain.

But to create an experience that makes people feel like they're exploring it.


⚙️ How We Built It

To bring this vision to life, we engineered a full-stack interactive 3D WebGL experience using React, Three.js, Express, and Google Gemini AI.

3D WebGL Neural Matrix

We built a dynamic neural environment using Three.js and @react-three/fiber with custom shaders to render dense glowing synaptic fibre networks, floating memory orbs, and volumetric particle dust.

To make movement feel alive, we implemented real-time dynamic field-of-view warp-stretch formulas that mirror changes in velocity, creating the sensation of drifting through a living neural network.

Generative AI Monologue Engine

Using the Google Gemini 2.5 API on a secure Express backend, every interaction becomes personal.

As users explore memory orbs across the prefrontal cortex, visual cortex, limbic system, and cerebellum, Gemini generates stream-of-consciousness neural monologues inspired by the user's core memory, making every journey unique.

Cognitive Web Audio Synthesizer

We developed a custom zero-dependency Web Audio API dual-oscillator synthesiser that maps real-time cursor movement directly to binaural carrier frequency shifts and sweep filters, allowing sound to evolve naturally with every interaction.

Cinematic Singularity Portal

As users uncover more memories, the experience evolves with them.

After interacting with three Memory Orbs, a massive wireframe Dream Portal emerges along the Z-axis.

Using quaternion spherical interpolation, the camera gradually transitions from user-controlled exploration into a cinematic forward acceleration, ending in a complete whiteout awakening sequence.


⚡ Challenges We Faced

Building an experience that felt effortless required solving some incredibly challenging technical problems.

Smooth Camera Steering & Velocity Blending

Transitioning from user-controlled camera movement into automatic cinematic steering demanded carefully dampened camera quaternions to avoid disorienting motion while preserving immersion.

WebGL & Bloom Performance

Rendering hundreds of emissive synaptic nodes with bloom effects required geometry instancing and extensive material optimisation to consistently maintain 60 FPS across desktop and mobile devices.

Viewport Responsive Overlays

Balancing a full-screen immersive 3D canvas with layered glassmorphism HUD interfaces across multiple screen sizes required careful responsive design without interrupting the core experience.


🎓 What We Learned

This project pushed us far beyond building beautiful visuals.

It deepened our understanding of mathematical camera kinematics through matrix transformations, 3D vector mathematics, and spherical linear interpolation for cinematic camera movement.

It strengthened our knowledge of harmonic web audio synthesis through dynamic gain node modulation and frequency sweeps mapped directly to user interaction.

And perhaps most importantly, it taught us how carefully crafted system prompts can guide Google Gemini to generate deeply contextual, introspective AI monologues that feel natural within an interactive storytelling experience.

Built With

Share this project:

Updates