Edtech · 3D + AR · 2025
Lattice
Proteins you can hold in your hand.
A 3D viewer built from real Protein Data Bank files, an AR flow from study card to desk in three taps, and quizzes you answer by pointing.
- Product
- UI/UX
- Frontend
- QA
- Role
- Concept project · design + Three.js prototype
- Year
- 2025
- Disciplines
- Product · UI/UX · Frontend · QA
01 The problem
Biology students memorise shapes they’ve never seen. Diagrams are flat, and classroom 3D models are rare and shared.
02 Key decisions
Every model is real data
Structures come straight from the Protein Data Bank: 4HHB for hemoglobin, 1BNA for DNA.
Three taps to the desk
Card → View in AR → place. Surface detection starts while the card is still open, so placing feels instant.
Quizzes you answer by pointing
“Aim at an α chain.” A reticle locks on, and misses become tomorrow’s five-minute review.
03 Built in code
1export function useStructure(pdbId: string) {2 const atoms = usePdb(pdbId) // files.rcsb.org3 const mesh = useMemo(() => instancedSpheres(atoms, {4 radius: vdw, color: byChain(palette.colourSafe),5 }), [atoms])6 useLod(mesh, { far: 0.35, near: 1 }) // 60 fps on phones7 return mesh8}
04 Then I tried to break it
- AR session survives an incoming call
- Chain colours work for deuteranopia
- Reticle visible on white desks
- Large models show load progress
✦ What I’d measure
Concept project. These are the success measures I designed for, not reported results.
→