Periodiq
Search “periodic table” and the top results look like they were built in 2010. Dense tables, flat colors, ad-heavy layouts.
Chemistry deserves a better reference.
Periodiq treats the periodic table as something worth exploring, not just looking up. Metals shimmer. Gases emit particles. Radioactive elements pulse. The whole grid transforms when you switch property views, and elements change phase in real time as you drag the temperature slider from 0K to 6000K.
What’s inside
Click any element and you land on a detail page with four 3D visualization modes.
| Mode | What you’re looking at |
|---|---|
| Bohr model | Nucleus and orbiting electrons on tilted shells. Outer shells orbit slower than inner ones, because that’s how it works. |
| Electron orbitals | Isosurfaces from real spherical harmonics Y(l, m). Positive and negative phases in complementary colors. Drill into individual orbitals (dxy, dz², dx²-y²). |
| Crystal structure | BCC, FCC, HCP, and diamond cubic unit cells with atom positions, nearest-neighbor bonds, and wireframe edges. |
| Atomic radii | Three concentric spheres for covalent, atomic, and van der Waals radii, scaled honestly. |
Plus five tabs of data per element: overview, properties, electrons, compounds, history. Roughly 100 fields per element, aggregated from PubChem and Wikipedia. 381 compounds across 99 elements. Etymology hand-written for all 118 names.
Why I built it
I wanted to learn React Three Fiber on something that wasn’t a tech demo, and I wanted a reference I would actually use. The orbital visualizations were the hardest part and the most satisfying to get right. Computing spherical harmonics in real time and turning the result into a clean isosurface mesh is one of those problems where the math and the rendering have to agree, and when they do, the output looks like the textbook diagrams finally make sense.
For the technical walkthrough of how those orbitals get drawn, see Drawing electron orbitals from scratch. Live at periodiq-three.vercel.app.