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 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.
• Quiz modes, flashcards, searchable gallery, favorites library, and study notebooks.
• Local XP progression, attainable achievements, daily challenges, and keyboard shortcuts.
• Screenshot and GLB export tools for the active specimen.
• 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 expects the local app to already be running, captures desktop, compact, mobile, and interaction screenshots, then checks canvas pixel metrics to catch blank renders or major layout regressions.

Start the app before running visual verification:

npm run dev

By default, verification opens http://127.0.0.1:5173/. If Vite uses another port, pass the app URL explicitly:

APP_URL=http://127.0.0.1:5174/ npm run verify

The script uses Google Chrome through Playwright Core. If Chrome is installed in a non-default location, pass the executable path:

CHROME_PATH="/path/to/Google Chrome" npm run verify

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.
• Further reduce and lazy-load the 3D vendor bundles.
• Expand educational annotations for each organelle.
• 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.

The modular interface, study tools, progression system, and rendering improvements were contributed by @niccomann in PR #4.

Additional 3D model provenance is documented in docs/ASSETS.md.