Neural Resonance

Inspiration

Everyone talks about AI. Almost nobody has seen one think.

Every explanation of neural networks is a diagram — circles, arrows, math. And every existing 3D visualization of a neural network is a technical dashboard: grids of dots built for engineers, not for wonder. We studied them all (TensorSpace, CNN visualizers, WebGL playgrounds) and realized nobody had asked the obvious question: what does it feel like to stand inside a thought?

This hackathon is about creating wonder, not solving problems. So we made the inside of an AI a place — and let you fly through it.

What it does

Scroll, and you fly forward through a living neural network in seven chapters:

1. Awakening — a single spark ignites thousands of neurons in the dark
2. Input — raw data races past you into the first layer: the world becoming numbers
3. Hidden Layers — a cathedral of violet dendrites where noise becomes meaning
4. Attention — golden arcs sweep between distant neurons: the network deciding what matters
5. Prediction — candidate answers hang in space as probability orbs; one burns gold
6. Training — the signals reverse direction and turn red. You don't read the backpropagation formula — you feel it. Loss falls and accuracy climbs, live
7. Emergence — the network condenses into a breathing, golden brain-core: "No neuron understands. Together, they almost do."

You're never a passenger. Your cursor is a thought probe — neurons near it fire. Click anywhere and a cascade ripples through the entire network, waves of activation racing along the synapses. Every chapter pairs a poetic line with a real, plain-language piece of AI science, so the beauty always means something.

How we built it

• React + Vite + TypeScript, React Three Fiber / Three.js, custom GLSL shaders, Lenis smooth scroll, Zustand, and a Bloom post-processing pass that turns additive geometry into living light.
• Everything is procedural. The network topology — 26 layers, ~1,200 neurons, ~2,400 synapses, curved attention arcs — is generated at runtime. No 3D models, no textures, no downloaded assets: the entire world is math and light.
• One normalized scroll value (0 → 1) acts as a film timeline. It drives the camera flight, chapter moods, shader uniforms, and UI — the whole experience is scrubbing a movie that renders in real time.
• The signature mechanic — click cascades — is a tiny ring buffer of "spark" positions shared as uniforms by both the neuron and synapse shaders, so one click makes the entire network answer in perfect sync.

Challenges we ran into

• Beauty on a performance budget. Thousands of glowing things at 60fps meant everything had to live in two draw calls — one point cloud, one line batch — with all animation done on the GPU. Restraint was the real design tool.
• A completely black screen that took real detective work: our full-screen canvas was silently collapsing to a 150-pixel drawing buffer because of how it was positioned. Only a thin strip at the top actually rendered. One wrapper div fixed what hours of shader debugging couldn't.
• Making backpropagation felt. Reversing pulse direction sounds trivial, but making it read emotionally — gold flowing forward becomes red flowing backwards — took strict color discipline: gold is reserved for thinking, red appears only for error.
• Testing WebGL without eyes. We built a headless Playwright QA harness that flies the whole journey and screenshots every chapter in software-rendered WebGL — it caught real bugs our dev machines hid.

Accomplishments that we're proud of

• A neural network that feels like a place, not a diagram — something we couldn't find anywhere else on the web.
• The cascade. One click and ten thousand points of light answer you in sync. It never stops being satisfying, and it's powered by a uniform buffer smaller than a tweet.
• Zero assets. Every neuron, synapse, arc, orb, and the final brain-core is generated by original code — the whole world compresses into kilobytes of shader math.
• Story and science together. Each chapter teaches a true thing about AI in one sentence, without ever feeling like a lecture.
• Shipping two draw calls, 60fps, and a seven-chapter cinematic arc in a hackathon timebox.

What we learned

• One defended idea beats ten effects. Every award-winning 3D site commits to a single direction and budgets everything around it. Ours: thinking is gold.
• Scroll is a storytelling engine, not a scrollbar — scene logic beats page logic.
• Darkness is a cheat code: on a near-black canvas, a few thousand additive points plus bloom look like a film. Render less, and it looks like more.
• The interaction people repeat isn't the complex one — it's the responsive one. A click that makes the whole world answer feels like power.

What's next for Neural Resonance

• A data-type picker — watch images, text, and audio flow into the network as different kinds of light.
• A CNN vs RNN vs Transformer comparison flight through three differently-shaped minds.
• An LLM-powered guide who answers your questions about whatever chapter you're floating in.
• Sound — a generative score where every neuron firing is a note, so the network doesn't just glow. It resonates.

Built With

• 3d
• neural
• website