← Back to projects
Concept Prototype

AtlasFold

A 3D anatomy study workspace concept for students moving between spatial models, sectional slices, and active recall. AtlasFold is imagined as a front-end heavy learning environment that makes complex anatomy easier to manipulate, isolate, and revisit.

Concept note: this project is a speculative learning product concept built for the portfolio as a design-and-interaction study.
Concept System Snapshot
Learning Mode Spatial first

Starts with a manipulable 3D subject instead of a static atlas page so learners can orient before memorizing.

Context Layers + slices

Pairs the 3D model with study chapters, labels, and sectional views to connect memorization with anatomy in space.

Progression Explore into recall

The ideal end state is a tool that lets users move from guided exploration into quiz and retrieval practice.

Study workspace

A study surface that treats anatomy like something to navigate, not just memorize.

AtlasFold is aimed at the moment where traditional diagrams stop being enough. It imagines a workspace where the learner can pivot between a 3D structure, labeled layers, and quick chapter-based study states without losing orientation.

  • Side rail anchors the learner in chapter context and current layer selection
  • Main stage keeps the 3D object central while still exposing labels and sectional hints
  • Floating cards act like study prompts rather than passive decoration
  • The visual language is designed to support teaching tools, self-study, and future quiz interactions
AtlasFold is positioned as a concept prototype for interactive learning design: useful as a portfolio case study because it demonstrates spatial UI thinking, motion, and educational framing.

Designed Around

Three.js WebGL Education Interactive UI Learning Design

What It Solves

Many study tools separate 3D models, chapter notes, and quiz logic into disconnected steps. AtlasFold brings them together so the learner can explore, orient, and self-test in one continuous environment.

Why It Fits Here

  • Adds an education-focused concept without overlapping the existing healthcare site work
  • Shows you can design visually richer interaction systems, not just standard marketing pages
  • Rounds out the portfolio with a concept that feels exploratory, spatial, and technically ambitious
Interactive 3D Anatomy Workspace
Module Neurovascular Layers Guided study: isolate layers, rotate to explore, then test recall.
3D Study Space click + drag to rotate

Visual Direction

The scene is designed to feel precise and quiet rather than game-like. Depth, orbit lines, and contextual cards help the model feel navigable, while the sidebar keeps the learner grounded in a structured lesson.

Rendering Pipeline

The 3D model uses a lightweight wireframe renderer on a 2D canvas with manual projection math (no Three.js dependency). Each anatomical layer is a separate vertex/edge set that can be toggled independently, giving the learner direct control over visual complexity. Depth sorting and opacity scaling create a sense of spatial structure without a full WebGL pipeline.

Study + Recall Loop

The workspace is structured around a three-phase loop: explore with labels visible, then hide labels and try to name structures from their spatial position, then enter quiz mode where the system highlights a region and asks for identification. This mirrors proven active-recall strategies from spaced-repetition research applied to spatial anatomy content.

Next Step

A stronger prototype would add real medical mesh data (e.g. skull or limb models), cross-section plane slicing, and study checkpoint scoring tied to anatomy selection. That would turn the concept from a polished mock interface into a genuinely interactive education demo.