Ogneson

Bridging the gap between static texts and real visuals

Comment

Inspiration

This is my attempt to contribute to science as a developer. Instead of mimicking static textbook diagrams, this app visualizes atomic reality through spatial physics. It delivers just enough precision to take with you, while leaving enough room to ignite genuine 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 playground where you can actually see and feel what makes each element unique:

  • Real-Time 3D Electron Clouds: Replaces flat text diagrams with interactive, floating particle clouds that show how electrons actually move in 3D space.
  • Interactive 3D Crystal Structures: Displays the true internal atomic shape and crystal geometry of solid elements that you can rotate and inspect from any angle.
  • Element Sound Signatures: Translates the unique light emitted by each element into audible sound waves, letting you literally hear what an element sounds like.
  • Live State Simulations: Lets you see whether an element is a solid, liquid, or gas, showing you visually how it transforms as conditions change.

How we built it

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

  • Core Framework: Built on Next.js (App Router) for fluid layout rendering and instant page navigation.
  • 3D Graphics Engine: Powered by Three.js and custom WebGL shaders to render high-density, real-time particle simulations smoothly on the GPU.
  • Math Visualization: Native KaTeX integration to render exact quantum mechanics wave functions crisp and fast.
  • Sound Design: Web Audio API that dynamically converts element emission spectra into real-time harmonic soundscapes.
  • Instrument Aesthetics: Custom Tailwind CSS for a dark, ultra-minimal, high-contrast UI inspired by scientific laboratory hardware.

Challenges we ran into

  • WebGL Particle 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.
  • Accurate Wave Function Calculations: Translating complex continuous physics equations into discrete, real-time particle buffer coordinates in WebGL shaders.
  • UI Balancing: Designing an instrument-grade UI that presents deep technical data (like electron configurations and crystal lattices) without overwhelming non-technical users.
  • True Mobile & Screen Responsiveness: Fitting an 118-element, 18-column grid alongside heavy 3D spatial viewports on small screens is a massive UX hurdle—one that even major, official chemistry portals 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 3D probability clouds that make quantum orbitals feel tangible rather than abstract.
  • Building a multi-sensory experience that combines WebGL particle graphics with Web Audio spectral sonification.
  • Achieving a cold, ultra-dark, high-contrast visual identity that feels like a modern scientific instrument.

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.
  • The Playground of Bonding: A drag-and-drop reaction field to pair elements together, letting their electron clouds clash, fuse, and form molecules right before your eyes.
  • A Master 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.
  • The 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."

Built With

Share this project:

Updates

Submission history