Recently, I’ve received many emails and private messages from friends abroad urging me to continue—including a biology teacher and a Turkish friend. I’m truly encouraged, but I’ve been busy with work lately. For now, here’s a demo page, but I promise to keep iterating on this project.

I hope AI technology can genuinely shine in the education field and help children. I also welcome anyone with ideas to contribute or teachers to share their needs.

Project open-source address: https://github.com/cclank/cell-architecture-studio…

cclank/cell-architecture-studio

Source: https://github.com/cclank/cell-architecture-studio

Cell Architecture Studio

React TypeScript Vite Three.js 3D Assets Verification License Status Live Demo (https://cell-architecture-studio-inky.vercel.app)

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 (https://cell-architecture-studio-inky.vercel.app)

Cell Architecture Studio demo (https://cell-architecture-studio-inky.vercel.app)

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

Tech Stack

Project Structure

text . |-- 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:

bash npm install

Run the local development server:

bash npm run dev

Open the app:

text http://127.0.0.1:5173/

Build for production:

bash npm run build

Run visual verification:

bash npm run verify

Asset Notes

The highest fidelity specimens are loaded from public/models/ and configured in src/data/cells.ts.

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 (https://x.com/DilumSanjaya) for the source inspiration and visual direction.

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

岚叔 (@LufzzLiz): The replica is almost complete. I’ll share a tutorial and open-source the code. First, take a look at my recording to see the effect—focus on the first two; the rest haven’t been done yet 😂.

Special thanks to the original creator @DilumSanjaya for creating such an amazing project—I’m truly impressed 👍.

【Step-by-Step Tutorial】 1️⃣ Send the original creator’s video directly to Coex and ask it to replicate the website from the video. Codex will take screenshots, extract frames, generate images, and silently replicate it.

2️⃣