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

Open the live Vercel deployment

View the MP4 demo file

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.