Molecule Lab

• 

  Building paracetamol atom by atom. The textbook formula on the panel lights up as each atom snaps into place.

• 

  A finished molecule shows a short fact and earns up to three stars: built, quick and precise.

• 

  A short decorative story moment: a small caffeine molecule is taken in by a steaming coffee cup.

• 

  Every finished molecule becomes a small trophy in the glass cabinet next to the bench.

• 

  Six molecules to build: paracetamol, aspirin, caffeine, ibuprofen, vitamin C and vanillin.

• 

  Accessibility options: Calm mode, Reduce motion, Reach assist, and an adjustable table distance and height.

• 

  Story moment: finish ibuprofen and a glass of water appears, with a short fact on the panel.

• 

  Story moment: vitamin C lands on an orange slice. People can't make it, so it has to come from food.

• 

  Story moment: vanillin opens a vanilla orchid flower beside its pod, the molecule behind vanilla's smell.

• 

  The Molecules menu: nine molecules in three chapters, Pain relievers, Vitamins and energy, and Kitchen flavours.

• 

  New level: glucose, with its formula on the panel and a short, plain fact card.

• 

  Discovery mode: build freely and the game recognises what you made. Here, water.

• 

  Discovery mode with double bonds: one carbon and two oxygens become carbon dioxide.

• 

  The trophy cabinet now has three shelves for all nine molecules.

• 

  Accessibility settings: table height and distance, one-hand play, reach assist, calm mode and reduce motion.

Inspiration

I have spent 20 years in community pharmacy, and customers often asked me what is actually inside their medicine. I would explain that every tablet holds an active substance, plus excipients that give the product its shape, size and colour. The active substance is a molecule, but on paper it is only letters and lines. I wanted people to hold one: pick up the atoms, feel where each one belongs, and watch the structure appear in front of them.

What it does

At an old apothecary's bench, you build six everyday molecules: paracetamol, aspirin, caffeine, ibuprofen, vitamin C and vanillin. Pinch an atom, bring it to the growing molecule, and a correct bond snaps in with a rising bell note. A wrong bond bounces back with a soft tone, never a punishment. A see-through guide shows the target, and a textbook formula on the panel lights up atom by atom. Each finished molecule shows a short fact, earns up to three stars and becomes a trophy in a glass cabinet. Three have short decorative scenes: caffeine and a coffee cup, aspirin and a willow leaf, paracetamol and a tablet. You can then turn, resize or pull the molecule apart. Seated, hands only, a molecule in a few minutes.

How I built it

I designed Molecule Lab and built it with an AI coding assistant (Claude Code), checking every molecule structure and fact myself. It is a WebXR experience made with the Immersive Web SDK and Three.js in TypeScript. Nothing is downloaded: the room, atoms and objects are generated in code, and every sound is synthesized with Web Audio. Each molecule is stored as its real structure, and the game checks every bond against it. Progress is saved on the device, and it runs as a web page, with nothing to install.

Challenges I ran into

I do not own a headset, so the game was built and tested in the Immersive Web Emulator, where the demo video was also recorded. A real-headset test is the next step. Hands-only meant nothing could depend on hover: buttons react to a pinch, and an interrupted grab is never counted as a mistake. Reach was harder than expected: many atoms first sat beyond a seated player's arm, so the nearer table became the default.

Accomplishments that I'm proud of

Six real molecules, each checked bond by bond against its true structure. A game playable with hands alone. Accessibility built in: Calm mode, Reduce motion, Reach assist and an adjustable table.

What I learned

How to design for hands instead of controllers, and how to direct an AI coding assistant while verifying its work myself, structure by structure.

What's next for Molecule Lab

More molecules and story scenes for all of them, more languages, a classroom mode for teachers and pharmacy students, and tuning on real headsets for comfort, reach and eye-gaze accuracy on Meta VR Glasses.

What's new since the first submission

• Nine molecules in three chapters. The Molecules menu is now organised as Pain relievers (paracetamol, aspirin, ibuprofen), Vitamins and energy (vitamin C, caffeine, glucose) and Kitchen flavours (vanillin, menthol, cinnamaldehyde, the molecule behind cinnamon's smell). Glucose, menthol and cinnamaldehyde are new levels.
• Story moments for every early level. Ibuprofen now ends with a glass of water, vitamin C with an orange slice, and vanillin with a vanilla orchid flower beside its pod, each with a short, plain fact.
• Discovery mode (free build). Place atoms however you like, choose single or double bonds, undo freely, and the game recognises what you made: water, carbon dioxide, ammonia, methane and more, plus all nine level molecules (18 in total), each with a fun fact. Anything else gets a friendly "not a known molecule yet" message. It is family-friendly: no alcohols or drugs of abuse.
• A bigger trophy cabinet with three shelves for the new molecules.
• Accessibility still applies everywhere: table height and distance, one-hand play, reach assist, calm mode, reduce motion, per-element sounds and mute. Your build is saved if you leave VR or pause.
• Every new medicine and molecule text was reviewed by me, a pharmacy professional with 20 years in community pharmacy.

Honest note: the new features were built and tested in the Meta XR emulator; a test on a real Quest headset is still pending. The demo narration uses a synthetic voice (Piper TTS).

Molecule Lab is for education and fun. It does not give medical advice.

Built With

• claude-code
• github
• immersive-web-sdk
• three.js
• typescript
• vite
• web-audio
• webxr