Ogneson

Bridging the gap between theory and reality

Comment

Inspiration

This is my attempt to contribute to science as a developer. Instead of mimicking textbook, this app visualizes reality through physics. It delivers just enough to take with you, while leaving enough to ignite curiosity about how our universe works. It will make you know chemistry and physics with a different approach

What it does

It transforms the standard, boring periodic table into a visual one where you can actually see and feel what makes each element unique:

  • Electron Clouds: It replaces flat text diagrams with floating particle clouds that show how electrons actually move in space.
  • Crystal Structures: It displays true atomic shape and geometry of solid elements that you can rotate and inspect from any angle.
  • Sound Signatures: It translates unique light emitted by each element into audible sound waves, letting you literally hear what an element sounds like.

How we built it

It was engineered from scratch using a modern, high-performance web stack:

  • Framework: Built on Next.js (App Router) for layout rendering.
  • Engine: Powered by Three.js and custom WebGL shaders to render high-density, real-time particle simulations smoothly on the GPU.
  • Math Native KaTeX integration to render exact wave functions.
  • Sound Web Audio API that converts element emission spectra into real-time harmonic soundscapes.
  • UI/UX: Custom Tailwind CSS for a dark, ultra-minimal, high-contrast UI inspired by scientific laboratory hardware.

Challenges we ran into

  • Performance: Rendering tens of thousands of individual points for complex orbital density shells \(|\Psi|^2\) while maintaining a stable 60 FPS frame rate on lower-end GPUs was insanely difficult.
  • Calculations: Translating complex continuous physics equations into discrete, real-time particle buffer coordinates in WebGL shaders.
  • Balancing: Designing an instrument-grade UI that presents deep technical data (like electron configurations and crystal lattices) without overwhelming non-technical users.
  • Responsiveness: Fitting an 118-element, 18-column grid alongside heavy viewports on small screens is a massive UX hurdle—one that even major, official chemistry portals like pubChem routinely fail by forcing ugly horizontal scrollbars or cramped, broken text. We solved this by building dynamic grid breakpoints, adaptive touch camera controls, and fluid viewport scaling to deliver a seamless experience on any device.

Accomplishments that we're proud of

  • Successfully rendering interactive probability clouds that make quantum orbitals feel tangible rather than abstract.
  • Building a multi-sensory experience that combines particle graphics with spectral sonification.
  • Achieving a visual identity that feels like a scientific instrument instead of plain notes.

What we learned

  • Deepened our understanding of WebGL point-cloud rendering and spatial graphics pipelines
  • Learned how to map optical physics parameters (emission spectra) to digital signal processing and sound synthesis.
  • Balancing aesthetic minimalism with information density to maximize user engagement.

What's next for Ogneson

Ogneson isn't a finished monument; it's a living canvas. Chemistry and physics don't end at static boundaries, and neither does this tool. It keeps growing. Some horizons we are actively exploring include:

  • Shrapnels of Light & Excitation: Unlocking dynamic quantum state morphers, letting users pull electrons out of their ground states and watch atomic orbitals reshape in real time.
  • Bonding: A drag-and-drop reaction field to pair elements together, letting their electron clouds clash, fuse, and form molecules right before your eyes.
  • Thermal Dial \($0\text{ K} \rightarrow 6000\text{ K}$\): A global temperature slider to watch the entire periodic table freeze, melt, boil, and turn into glowing plasma in a single sweeping gesture.
  • Isotope & Decay Horizon: Breathing life into nuclear stability—simulating real-time particle emission and watching radioactive cores slowly transform over cosmic timescales.

Not everybody is a science nerd like me, but everybody should get to know something about it

"If you want to understand nature, you must learn to appreciate the language she speaks in."

Share this project:

Updates

Submission history