I Built a 3D Periodic Table in the Browser So Students Can Actually Explore Chemistry

TL;DR: A flat periodic table chart shows you 118 elements in rows. A 3D periodic table in the browser lets you filter families, scrub through discovery history, and quiz yourself, all without installing anything. I built Periodic Table 3D to make chemistry exploration feel like exploring, not memorizing.

I wanted to spin the periodic table like a globe and watch it light up year by year as humans discovered each element. A poster on the wall cannot do that. A textbook cannot filter 118 tiles down to just the noble gases with one click. So I built a 3D periodic table that runs in any browser, shows all ten element families in color, plays a timeline from ancient times to today, and includes a quiz to test your knowledge.

This article walks through what Periodic Table 3D is, how it compares to a printed chart, a full tour on desktop and phone, the tech I used to build it, and the honest list of what it cannot do. I built it, so I am also the person listing the limits.

What Periodic Table 3D Is

Periodic Table 3D is an interactive chemistry tool I designed and built under VisionVix, a platform for AI tools and 3D educational simulators. It runs entirely in the browser with no account, no install, and no data sent anywhere. Open visionvix.world, press Open Simulators, and choose Periodic Table. You get all 118 elements laid out in the standard table, each one a glowing tile you can tap or click to open a detailed card.

The scene sits inside a green control room. Each element tile is colored by its family, so alkali metals, transition metals, halogens, and noble gases each read as a visual block. Tap any tile and a side panel opens with four tabs: Overview, Properties, Uses, and Discovery. You can toggle between a flat table view and a curved 3D view with one button press.

The tool includes ten family filters, a discovery timeline from ancient times to the present, a built-in quiz, and a 60-second molecule game where you bond atoms together. Nothing you type leaves your browser. I built it for students and curious learners who want to explore the periodic table instead of just reading it.

The Ten Element Families

The top bar shows ten families you can filter by:

• Alkali metals
• Alkaline earth metals
• Transition metals
• Post-transition metals
• Metalloids
• Nonmetals
• Halogens
• Noble gases
• Lanthanides
• Actinides

Pick one and the rest of the table dims. You can also filter by radioactive elements, gases, solids, or liquids. This makes it trivial to see where the noble gases sit or how many halogens exist without hunting through a color key.

Printed Chart vs 3D Periodic Table

A printed chart and a 3D tool do different jobs. A student can use both. Here is the breakdown:

The tool does not replace a textbook. It makes the layout easier to explore. It shows things a chart cannot show, such as when each element was discovered or what happens when you filter out everything except the lanthanides.

A Full Walkthrough on Desktop and Phone

1. Open visionvix.world and Choose Periodic Table

Everything starts at visionvix.world. The landing page opens on the 3D Simulation Platform hero, with the green Open Simulators button under the headline. Press it. That button takes you to the Choose Your 3D World Simulator page, which lists every simulator that is ready. At the time of writing, nine worlds are listed: seven live and two coming soon.

Each simulator sits on its own card with a green Enter Simulator button. Press Enter Simulator on the Periodic Table card. On a phone, the steps are identical, and the cards stack in one column instead of side-by-side.

2. Look at the Whole Table

The tool opens in table view. All 118 elements are on screen in the standard layout, with the lanthanides and actinides in their usual two rows underneath. Each tile shows the atomic number, the symbol, and the name. The tiles are colored by family, so you can see at a glance where the transition metals end and the metalloids begin.

3. Tilt It into 3D and Open an Element

Press the globe button. The table bends into a curved wall you can tilt and look across. Click any element. I will use gold as the example. The element panel opens on the right side. The Overview tab shows:

• Atomic number
• Atomic mass
• State (solid, liquid, gas, or predicted)
• Family
• Electron configuration
• A shell diagram
• A small spinning 3D sample
• A short list of real-world uses

The panel has four tabs. Properties adds the period and group, stability, and more technical details. Uses lists where you will find the element in everyday life. Discovery shows who found it, when, and a few facts about the discovery process.

4. Filter by Family, State, or Radioactivity

The bar across the top has ten family buttons. Pick one and the rest of the table dims. Press Noble Gases and only helium, neon, argon, krypton, xenon, radon, and oganesson stay lit. You can also filter by radioactive elements, gases, solids, or liquids. The filters stack, so you can show only radioactive solids if you want.

5. Play the Discovery Timeline

The bar along the bottom is a timeline from ancient times to the present. Press play, or drag the slider, and the table lights up only the elements known by that year. Quick buttons jump to Ancient, Medieval, Modern, and Present.

This is where the tool shows something a printed chart cannot. Some elements, such as gold, silver, copper, iron, sulfur, tin, lead, and mercury, have been known for thousands of years. Others, such as the transuranic elements from neptunium onward, were made only in labs in the 20th century.

Elements 100 to 118 have never been made in visible amounts, so their state is marked as predicted. The timeline shows how the table filled up and how late the heavy elements arrived.

6. Test Yourself with the Quiz

Press Quiz, or hit the Q key, and an element is highlighted with clues. The clues include:

• Family
• State
• Atomic mass
• Electron shells
• Period and group

You type the element name or its symbol and press Check. The tool keeps a running score and a streak. If you get it wrong, it shows the correct answer and moves to the next element. The quiz pulls from all 118 elements, so you will see obscure ones like ytterbium and promethium, not just carbon and oxygen.

7. Try the Molecule Game

The Molecule Game is a 60-second round. Atoms float in a 3D box. You click two atoms to bond them. Click the bond again to make it a double bond. The game shows the last molecule you made and keeps your score. It is a simple mechanic, but it makes bonding feel less abstract than drawing Lewis structures on paper.

If you want a more advanced molecule builder with full SMILES notation, orbital visualization, and export options, I also built the 3D Molecule Builder tool on VisionVix.

8. Read the About Panel

The About panel is the honest part. It says:

• The tool is for learning, not for lab work, medical decisions, exam marking, or any professional use.
• AI helped build parts of it, and every element was checked in a browser against published references.
• No data you type is sent anywhere. Everything runs client-side.

It also lists the keyboard shortcuts and explains how the data is handled. The About panel exists because I wanted users to know exactly what the tool can and cannot do before they rely on it.

9. Use it on a phone

On a phone, the whole table fits on one screen. An element opens as a panel from the bottom, and the quiz and filters work the same way.

Why a 3D Periodic Table Helps

A printed chart is a reference. A 3D periodic table is an exploration tool. Here is why the difference matters.

Families Become Visible Blocks

On a printed chart, you learn that fluorine, chlorine, bromine, iodine, and astatine are halogens by reading the color key and scanning for the right shade of green or orange. In Periodic Table 3D, you press the Halogens button and only those five elements stay lit. The rest fade. You see the family as a vertical column on the right edge of the table. That spatial memory sticks.

The Timeline Shows the Discovery Story

A chart lists elements in order by atomic number. It does not show that humans knew about carbon and sulfur for millennia but only isolated oxygen in 1774 and fluorine in 1886. The timeline does. Drag the slider to 1900 and you see that most of the periodic table was still blank. Jump to 1950 and the transuranic elements start appearing. That story, the fact that the table was built piece by piece over centuries, is invisible on a poster.

Some elements have been known for thousands of years. Others were made only in labs in the 20th century. The discovery timeline shows that gap in a way a printed chart never can.

The Quiz Forces Retrieval Practice

Reading a chart is passive. The quiz forces you to recall. It gives you clues, you type an answer, and you get immediate feedback. That loop, clue to guess to check, is retrieval practice. It works better than rereading a textbook page. The quiz pulls from all 118 elements, so you cannot coast on memorizing the first 20.

No Installation Means No Barrier

A desktop app means a download, an install, maybe an admin password, maybe antivirus warnings. A printed chart means buying one or finding a PDF. Periodic Table 3D runs in any modern browser. A teacher can project it in class. A student can open it on a phone on the bus. No friction.

How I Built It, in Plain Words

I built Periodic Table 3D solo. I used Three.js for the 3D rendering, React for the UI, Tailwind CSS for styling, and Vite as the build tool. The element data came from public chemistry databases. I wrote a script to parse the data into JSON, then built the layout engine to position all 118 tiles in the standard periodic table grid.

The 3D Scene

The curved 3D view is a Three.js scene. Each element is a plane geometry with a texture that shows the atomic number, symbol, and name. The tiles are positioned in a grid, then the whole grid is bent into a curve using a shader. When you click a tile, a raycast checks which element you hit and opens the side panel.

The Timeline

The timeline slider is a React state hook tied to a year value. Each element in the JSON has a discovery year. The render loop filters the elements array to only those with a discovery year less than or equal to the current slider value, then dims the rest. The play button increments the year value every 100 milliseconds.

The Quiz

The quiz picks a random element, shows its clues, and waits for input. When you press Check, it compares your input to the element name and symbol using a case-insensitive match. If you are right, the score increments and the streak increments. If you are wrong, the streak resets and it shows the correct answer. The state is stored in React hooks, so nothing persists between sessions.

The Molecule Game

The molecule game spawns atoms as Three.js spheres. When you click two spheres, the game draws a line between them and stores the bond in an array. Clicking the bond again toggles it to a double bond, drawn as two parallel lines. The game keeps a score based on how many valid molecules you make in 60 seconds. A valid molecule is any structure where each atom has the right number of bonds according to its valence rules. The validation is basic, not full chemistry simulation.

AI helped with parts of the build, but every element was checked in a browser against published chemistry references.

I used AI to generate boilerplate code, write the initial JSON parser, and draft some of the UI components. Then I rewrote most of it by hand because AI-generated code tends to be verbose and fragile. Every element card was checked manually against WebElements and PubChem. The discovery years came from multiple sources and I cross-referenced them.

The Data Handling

Nothing you type is sent anywhere. The quiz, the molecule game, the search, all of it runs client-side in JavaScript. No analytics, no tracking, no backend. The only network request is the initial page load. I wanted the tool to be private by default.

If you want to see more of the build process, I document projects like this on my YouTube channel, where I walk through the code and design choices in detail.

What It Cannot Do

Periodic Table 3D is for education and exploration. It is not for professional use. Here is the honest list of limits:

• Not for lab safety. The element cards list general properties, but they do not include MSDS sheets, handling guidelines, or hazard symbols. Do not use this tool to decide how to store or handle chemicals.
• Not for medical decisions. Some elements are used in medicine, and the Uses tab mentions that, but this is not medical advice. Do not use this tool to decide on treatments or supplements.
• Not for exam marking. The data is accurate to the best of my ability, but I am one person checking against public sources. If you are a teacher grading an exam, use a peer-reviewed reference.
• Not a full chemistry simulator. The molecule game is a simple bonding mechanic. It does not simulate molecular dynamics, energy levels, orbitals, or quantum states. For that, use real chemistry software.
• Elements 100 to 118 have limited data. These elements are synthetic and short-lived. Most have never been made in visible amounts. The state, appearance, and properties are predicted, not measured.

I built this tool because I wanted to see all 118 elements in one place and move through them in ways a printed chart does not allow. It is free, it is fast, and it does not ask for your email. If you want to explore the periodic table instead of just reading it, open it and start filtering.