Image

Molecular is a 3D chemistry learning tool that runs in your browser. Students can explore a curated library of molecules, build atoms by snapping elements together at physically correct angles, and run reactions with real physics. There's an AI tutor that watches what you're doing and explains it. The whole thing is mobile-first, free, and live right now.

Sodium hydroxide molecule rendering

The goal from the start was to make chemistry feel like something you experience, not something you read about. Most educational chemistry tools are flat. 2D diagrams, static periodic tables, multiple-choice quizzes with molecule clip art. They teach the facts but they don't teach the space. Chemistry is fundamentally three-dimensional. A water molecule bends at 104.5 degrees. Methane is a tetrahedron. Salt forms because an electron physically leaves one atom and joins another. None of that comes through in a worksheet. I wanted to build something where you could reach into a 3D scene, snap atoms together, watch electrons orbit, fling molecules at each other, and feel the chemistry happen around you. An immersive, interactive experience where learning is a side effect of playing.

Three Modes, Three Ways to Learn

Explore is the browsing mode. There are roughly 30 to 50 curated molecules in the library. Tap one and it appears in 3D: CPK-colored atoms, swirling sprite electrons orbiting their shells, covalent bonds rendered as glowing beams. You can rotate, zoom, inspect individual atoms, and ask the AI tutor questions about what you're looking at. It's a reference tool and a curiosity engine.

Build is where it gets hands-on. You drag elements off a periodic table and snap them together. The chemistry engine enforces real bonding rules: octet and duet constraints, VSEPR geometry (tetrahedral at 109.5 degrees, trigonal planar at 120, linear at 180), electronegativity calculations. You can't just stick atoms anywhere. If you try to give carbon five bonds, the engine won't let you. When you snap an oxygen onto two hydrogens at the correct angle, you feel the geometry click into place. That tactile feedback is the whole point.

Lab turns on the physics. Molecules become physical objects you can fling around the scene. Smash the right molecules together and you get a reaction: electron-transfer animations for ionic bonds, glowing beams forming for covalent ones. The reaction library covers about 30 curated reactions. Lab mode is playful on purpose. Students who'd never sit through a textbook explanation of NaCl formation will absolutely yeet sodium at chlorine to see what happens.

The Periodic Table Explorer

Select the elements from the table to get details

Molecular includes a full interactive periodic table. Not a static image with hover tooltips. Users can click any element and get a 3D rendering of the atom: nucleus, electron shells, electrons orbiting at the correct shell distances based on the element's actual electron configuration. Hydrogen has one electron in one shell. Carbon has two shells with electrons distributed across them. Iron has four, all visualized in a 3D simulation.

Below the visualization, there's educational content about each element: atomic mass, electronegativity, common uses, where it shows up in the real world. If we have molecules in the library that contain that element, they're linked right there so you can jump from "I'm looking at oxygen" to "show me water, show me carbon dioxide." The whole thing is designed as an educational tour that a student can explore on their own or a teacher can walk through with a class.

The AI Tutor

Interact with the current molecule in the scene and ask questions with AI

This tool is one of my first attempts at integrating a chat bot with the application. The AI chat runs through the Vercel AI Gateway, which handles model routing and rate limiting. It's not a generic chatbot bolted onto the side of the app. It's context-aware: every time a student asks a question, the app sends a snapshot of the current scene, which mode you're in, your education tier, and what reactions just happened. The AI sees what the student sees.

The education tier system shapes how the tutor responds. Beginner (middle school, elements 1 through 20) gets fast, friendly answers built on analogies. "Think of electrons like seats on a bus: atoms want every seat filled." Standard (high school and AP, elements 1 through 36) and Advanced (college intro, electron configurations, hybridization) get precise chemical terminology, VSEPR angle references, and formula notation. Same question, very different answer, tuned to where the student actually is.

Teacher Demonstrations

Add different physical interactions to form or destroy bonds

There are about 15 pre-packaged demonstrations designed for classroom use. A teacher projects the app, picks a demonstration (water formation, methane combustion, salt from sodium and chlorine), and walks the class through it step by step. Each demo follows a three-stage structure: Ingredients shows the starting molecules, Combine plays an animated reaction sequence, and Results displays the products with explanatory text.

Every demonstration includes two description levels: Elementary and Advanced. A middle school teacher and a college instructor can use the same demo with the detail level appropriate to their class. No prep required, no slides to build. Just pick a reaction and go.

Stack and Architecture

The front end is Next.js 16 with React Three Fiber for 3D rendering on top of Three.js. State management is Zustand, which keeps things simple and fast. The UI layer uses Tailwind CSS and shadcn/ui for the panels, drawers, and controls. Physics simulation runs on @react-three/rapier. Testing is Vitest for units and Playwright for end-to-end. The whole thing is TypeScript and deployed on Vercel.

All the bonding rules, VSEPR calculations, electronegativity lookups, and reaction matching live in plain functions that don't know or care about Three.js. This means the engine is testable in isolation, runs identically on server and client, and could be extracted into its own package someday. The rendering layer reads chemistry state and visualizes it; the chemistry layer never reaches back into the renderer.

Mobile-first meant real constraints. The layout uses a bottom drawer on phones and a three-panel layout on desktop. The 3D scene targets 30fps on mid-range phones, which required careful choices about particle counts, shadow quality, and geometry complexity. Valence electrons pulse gently as a visual cue; electron orbits use sprite-based rendering instead of geometry to keep the triangle count down.

What's Next

The molecule library will keep growing. I want to add a guided lesson mode that sequences Build and Lab activities into structured curricula. Better accessibility support is on the list, along with offline capability via service workers. The Teacher Demonstrations feature opens up a path toward a proper classroom dashboard where teachers can assign specific molecules or reactions and track completion.

Try It

Molecular is live at molecular.chriswest.tech. The source code is on GitHub. Pull it up on your phone, build a molecule, throw it at something.

Molecular: A 3D Chemistry App with an AI Tutor for the Classroom