cell-architecture-studio
An interactive cell architecture gallery built with React, Vite, Three.js, and staged GLB or procedural 3D cell assets. The project recreates a premium educational biology interface with selectable cell types, organelle details, comparison mode, responsive layout, and visual verification coverage.
Live Demo
Highlights
- Seven specimen views: plant cell, white blood cell, neuron, epithelial cell, bacteria cell, animal cell, and muscle cell.
- High fidelity Plant Cell and White Blood Cell GLB rendering with native texture preservation.
- Mesh first experience with 3D canvas rendering as the default view.
- AI Tutor panel with learning prompts, lesson focus, and mastery tracking.
- Model loading overlay for large GLB assets on slower networks.
- Procedural fallback geometry for specimens that do not yet have production GLB assets.
- Detail panel for organelles, microscope modes, specimen metadata, and comparison workflow.
- Responsive desktop, compact, and mobile layouts with browser screenshot verification.
Preview Modes
| Mode | Purpose |
|---|---|
| Mesh | Loads available GLB models or procedural Three.js geometry. |
| Focus | Emphasizes selected organelles and supporting biological details. |
Tech Stack
| Layer | Tools |
|---|---|
| App | React 19, TypeScript, Vite |
| 3D | Three.js, React Three Fiber, Drei |
| UI | CSS modules in src/styles.css, Lucide icons |
| Assets | GLB models, transparent PNG thumbnails, NIH previews |
| Verification | Playwright Core, PNG pixel metrics |
Project Structure
.
|-- docs/
| |-- media/
| `-- ASSETS.md
|-- public/
| |-- cell-renders/
| |-- cell-renders-transparent/
| |-- models/
| `-- nih-previews/
|-- scripts/
| `-- verify.mjs
`-- src/
|-- App.tsx
|-- components/
|-- data/
`-- styles.css
Getting Started
Install dependencies:
npm install
Run the local development server:
npm run dev
Open the app:
http://127.0.0.1:5173/
Build for production:
npm run build
Run visual verification:
npm run verify
Asset Notes
The highest fidelity specimens are loaded from public/models/ and configured in src/data/cells.ts.
| Specimen | Current asset |
|---|---|
| Plant Cell | public/models/plant-cell-first001.glb |
| White Blood Cell | public/models/white-blood-cell-user.glb |
| Animal Cell | public/models/animal-cell-nih.glb |
| Neuron | public/models/neuron-nih.glb |
| Bacteria Wall | public/models/bacteria-wall-nih.glb |
Transparent PNG references in public/cell-renders-transparent/ are used for thumbnails and model previews. Detailed provenance is tracked in docs/ASSETS.md.
Verification
npm run verify launches the local app, captures desktop, compact, mobile, and interaction screenshots, then checks canvas pixel metrics to catch blank renders or major layout regressions.
Current coverage includes:
- Desktop, compact, and mobile smoke checks.
- Plant Cell GLB render check.
- White Blood Cell GLB render check.
- Bacteria mesh interaction check.
- Comparison modal check.
Roadmap
- Add production quality GLB models for the remaining specimens.
- Add lazy loading and route level code splitting for 3D bundles.
- Expand educational annotations for each organelle.
- Add screenshot export and 3D export workflows.
- Add asset license metadata directly into the UI.
License
The application code is licensed under the MIT License. Included GLB models and image assets retain their documented provenance in docs/ASSETS.md.
Credits
Special thanks to the original creator @DilumSanjaya for the source inspiration and visual direction.
Additional 3D model provenance is documented in docs/ASSETS.md.
