FOSFORONERO LAB · 2026
Periodic Table
interactive
An experiment combining chemistry, history of science, and computer graphics: 118 elements, five historical atomic models from Thomson to Schrödinger, and a real-time WebGL scene for each atom. Runs entirely in the browser, serverless, no installs.
Technology
- Three.js / React Three FiberWebGL 3D engine for the atomic scene
- @react-three/dreiStars, OrbitControls, post-processing bloom
- Next.js 16 App Routerhybrid SSR + dynamic client rendering
- TypeScript 6type-safety across the entire pipeline
Data Sources
- IUPAC — Official Periodic TableStandard atomic weights, symbols and IUPAC 2021 nomenclature.
- NIST Chemistry WebBookThermophysical data, ionization energy, electron affinity. Public domain (US Gov.).
- PubChem (NIH / NLM)3D molecular structures, physical and biological properties. Public REST API, public domain (US Gov.).
- WebElements (University of Sheffield)Electron configurations, atomic radii, crust abundance.
- MIT CUA — Center for Ultracold AtomsQuantum physics and Bose-Einstein condensation (Ketterle et al. 1995, Nobel 2001). Cited in the Na and H element stories.
- Caltech IQIM / Kavli Nanoscience InstituteQuantum matter and gold nanoparticles for photothermal cancer therapy. Cited in the gold (Au) element story.
Inspiration
This project is inspired by Powers of Ten (1977) by Charles & Ray Eames — the scientific short film exploring the scales of the universe, from the proton nucleus to remote galaxies, with a zoom factor of 10 for each step. The goal of this periodic table is to replicate that same progression for each element: from the macroscopic sample to the crystal structure, the atom, the nucleus, down to quarks and bosons.
Roadmap
- 118-element periodic table — 11 thematic views: heatmaps, states of matter, blocks
- 5 historical atomic models: Thomson → Rutherford → Bohr → Sommerfeld → Quantum
- Real scale nucleus-to-electrons, speed slider, stars intensity toggle
- Info panel: electron configuration, 10+ physical properties, discoverer, year, isotopes
- Dark / light mode with 3 palettes · responsive tablet and mobile
- Search by name, symbol, or atomic number with cell dimming
- 3D crystal structure in-viewport: FCC, BCC, HCP, diamond cubic with infinite fog
- Molecule view: 3D geometries with covalent/ionic/polar bonds + PubChem search
- Element stories: narrative slides with scientific citations from MIT CUA and Caltech
- Material view: 3D metallic cube with real color + temperature slider (solid → liquid → gas)
- Real s / p / d / f orbital shapes with probability isosurfaces (Schrödinger equation)
- Level 2: zoom into the nucleus — protons and neutrons as 3D spheres at real scale
- Level 3: zoom into quarks — sub-nuclear structure of the proton (up/down quarks + gluons)
- Level 4: bosons, Higgs field, elementary particles of the Standard Model
Support the Project
This project is free and open source — no ads, no paywall. If you find it useful or just like it, consider buying a coffee: every bit of support helps dedicate more time to this and the other projects below, and expand features according to the roadmap.
♥ Support on Ko-fiOther Projects
fitmesh.fit
Wearable synchronization and personal health dashboard. Android + Galaxy Watch + Wear OS.
splitvote.io
Voting and polls for groups, with no registration or account. Privacy-first.
sitebrain.ai
WordPress plugin with self-hosted RAG engine. Index your content and answer visitors using OpenAI, Anthropic or OpenRouter. Privacy-first, GDPR-ready.