Remix

Make your own version of VirtuAnatomy Lab

Get an exact, working copy in your account, then change anything with chat.

Original by mohammed salman

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Build **VIRTUANATOMY LAB — “Feel the Science. Explore the Human Body.”**

Act as an expert full-stack developer, 3D graphics engineer and medical education UI/UX designer. Build a functional, responsive anatomy learning web app that can later be packaged for Android and iOS. I am a beginner with no coding knowledge, so implement the code yourself.

IMPORTANT: Minimise unnecessary AI work and dependencies. Build the complete core application in one pass. Reuse components, avoid unnecessary explanations, do not repeatedly redesign existing features, and do not use paid APIs or subscriptions. Prioritise working functionality over decorative features.

## 1. DESIGN

Create a premium medical simulation interface with a midnight navy background, white text, cyan/turquoise highlights, subtle glow, clean typography and professional scientific visuals.

Include responsive navigation:
- Dashboard
- 3D Anatomy Lab
- Organ Explorer
- Virtual Practicals
- Knowledge Tests
- Progress
- Settings

Make navigation and buttons functional. Use React, TypeScript, Tailwind CSS and Three.js or React Three Fiber.

## 2. MOST IMPORTANT: REALISTIC 3D HUMAN ANATOMY

The centrepiece must be a **realistic, anatomically detailed, three-dimensional human body**, resembling a genuine human anatomy specimen or professional medical 3D model—not a mannequin made from spheres, cylinders, cubes, simple shapes, cartoon graphics or a flat image.

Use a genuine, high-quality, properly licensed 3D human anatomy mesh in GLB, GLTF or another suitable format. Prefer an anatomically detailed model with realistic human proportions, a recognisable head and face, neck, shoulders, chest, abdomen, pelvis, arms, hands, legs and feet. The surface and anatomical structures must look cohesive and human, not like separate primitive objects.

Prioritise the following model features, according to the available licensed assets:

1. **External anatomy:** realistic human body proportions, natural anatomical contours, skin surface and recognisable body landmarks.
2. **Skeleton:** skull, vertebral column, rib cage, pelvis, major arm bones and leg bones.
3. **Muscular system:** recognisable major muscle groups with natural anatomical shapes and attachments.
4. **Internal organs:** heart, lungs, liver, stomach, kidneys and intestines in approximately correct anatomical positions.
5. **Circulatory system:** major blood vessels where supported by the model.
6. **Nervous system:** brain, spinal cord and major nerves where suitable assets exist.

Use separate selectable meshes or a model format with named anatomical parts whenever possible. Support showing, hiding and isolating available systems. If the selected asset is a single combined mesh, do not falsely claim that individual organs or layers can be independently selected.

### 3D VIEWER CONTROLS

Implement:
- Smooth mouse rotation and drag-to-orbit.
- Scroll-wheel zoom.
- Pan and reset camera.
- Front, back, left and right views.
- Full-body and close-up viewing.
- Selectable structures where supported.
- Highlight the selected mesh.
- Display the structure name, anatomical system, location and educational function.
- Search available structures.
- Loading progress and clear model-loading errors.
- Responsive layout and performance suitable for an ordinary Windows laptop.

Use realistic lighting, soft shadows, appropriate materials and high-quality rendering. Keep the background clean so the model is clearly visible.

**CRITICAL ASSET RULE:** Do not replace a missing anatomy model with primitive shapes and call it realistic. Use a genuinely available, legally usable anatomy mesh. If you cannot automatically obtain a suitable asset, create the viewer and asset-loading system, explain exactly which licensed GLB/GLTF file must be added, and display a clear placeholder notice until it is installed. Never pretend a placeholder is a real human anatomy model.

## 3. HEART ORGAN EXPLORER

Create a dedicated interactive 3D heart module using a genuine anatomical heart mesh.

Support labels and educational information for:
- Right and left atria.
- Right and left ventricles.
- Aorta.
- Pulmonary artery.
- Superior and inferior vena cava.
- Heart valves, only when accurately represented.

Allow rotation, zoom, selection, highlighting and reset. Include simple medical-student-level explanations, guided exploration and a short quiz. Only label structures that the available model supports accurately.

## 4. VIRTUAL PRACTICAL

Create one fully functional practical: **Identify the Major Structures of the Human Heart.**

Display an instruction, ask the student to identify a structure in the 3D model, accept the corresponding selection, check the answer, show hints and feedback, calculate points, display the final score and allow retry.

Connect answers to actual model structures where available. Never use unrelated buttons to pretend that 3D identification works. Clearly explain any limitations caused by the available asset.

## 5. QUIZZES AND PROGRESS

Include multiple-choice anatomy quizzes, correct answers, explanations, scores, retries and completed-practical tracking. Save progress locally using browser storage. Do not require accounts, a paid backend or a database for the initial version.

## 6. HAND TRACKING AND FUTURE SENSORY GLOVE

Include an optional experimental webcam hand-control feature using MediaPipe if feasible. Request camera access only when activated. Begin with a reliable hand gesture for controlling the model and retain mouse controls as a fallback.

Add a separate **Glove Demo Mode** with simulated finger-bend readings and simulated hand movement. Clearly label the readings as simulated. Design a modular input interface that can later support compatible physical sensors and a microcontroller. Do not claim that a real glove is connected or that physical touch or pressure is being measured.

These are secondary features. Do not sacrifice the realistic 3D anatomy viewer to implement them.

## 7. DASHBOARD

Create a professional dashboard with a welcome message, an Enter Anatomy Lab button, shortcuts to organ exploration and practicals, recently studied structures, quiz scores and learning progress. Every button must work.

## 8. TECHNICAL AND EDUCATIONAL REQUIREMENTS

- Build a working application, not a static landing page.
- Keep the anatomy viewer, organ explorer, practical logic and input controls modular.
- Use free libraries and appropriately licensed assets.
- Avoid paid APIs, unnecessary dependencies and complex backends.
- Handle missing assets, loading failures and camera permission errors.
- Use scientifically appropriate educational explanations.
- Include an educational disclaimer: this platform supports learning but does not replace supervised medical training.
- Make the website responsive and prepare it to be installable as a Progressive Web App (PWA).
- Preserve the code and existing working functionality when making changes.
- Do not invent medical accuracy, functional features or hardware integrations.

## 9. BUILD PRIORITY

Implement in this order:
1. Working app layout and navigation.
2. Genuine realistic 3D human anatomy model and viewer controls.
3. Anatomical structure selection and information panels.
4. Interactive heart model and identification practical.
5. Quizzes and saved progress.
6. PWA support.
7. Optional webcam tracking and simulated glove interface.

Use the best available genuine anatomy assets rather than spending effort generating decorative graphics. If an external asset is necessary, explain its source, licence and installation steps.

## 10. FINAL ACCEPTANCE TEST

Verify that a student can open the dashboard, enter the anatomy lab, view a genuine 3D human model, rotate and zoom it, select a supported anatomical structure, read its information, explore the heart, complete a practical and receive a score.

Fix errors before adding optional features. Deliver the working application and explain only the essential steps required to run it, save its code and deploy it.

**FINAL PRIORITY: A genuine, realistic human anatomy mesh with functional 3D interaction. Do not substitute simple geometric shapes, a static picture or a decorative dashboard for the actual anatomy experience.**

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.