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
Frequently asked questions
Are the 3D atomic models scientifically accurate?
It depends on the model. Thomson, Rutherford, Bohr and Sommerfeld are historical models: we show them as they were conceived, with their limitations stated. The “Quantum” view and the orbital inspector show the probability cloud of hydrogen-like orbitals — exact for hydrogen (Z=1), indicative for multi-electron atoms. No classical model truly describes the atom, and we say so in every view.
Do electrons really follow those orbits?
No. Bohr's circular orbits and Sommerfeld's ellipses are historical visual conventions. In quantum mechanics the electron has no trajectory: it has a probability distribution, the orbital. The quantum view is the physically correct representation.
Where does the element data come from?
From official, public sources: IUPAC (atomic weights and 2021 nomenclature), the NIST Chemistry WebBook (thermophysical data), PubChem (molecular structures) and WebElements. Every source is listed and linked on this page.
Can I use it at school or for studying?
Yes. It's free, ad-free and account-free, available in English and Italian. It runs entirely in the browser and is designed as a teaching tool for chemistry and physics.
Does it work on phones and tablets?
Yes. The 3D scene uses WebGL and is optimized for touch, with a responsive layout and dedicated mobile controls. A recent browser with WebGL support is required.
Does the molecule view show real geometries?
The main geometries are curated from real data and augmented with PubChem's 3D structures via search. Bonds (covalent, ionic, polar) are drawn illustratively to highlight their type, not as a quantum-mechanical simulation of bonding.
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-fi