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.

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.

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