About the project

💡 Inspiration

The inspiration for MolecuSculpt came from the realization that while medical science is rapidly advancing toward molecular and gene therapies, the tools for training surgeons to operate at this microscopic scale have lagged behind. We were fascinated by the potential of the MX Ink stylus—a mixed-reality peripheral offering unprecedented precision. We wanted to bridge the gap between abstract molecular biology and tactile surgical skill. The goal was to create a "flight simulator" for molecular surgery, where the margin for error is measured in nanometers, not millimeters 📏.

🚀 What it does

MolecuSculpt is a comprehensive mixed-reality training platform designed to prepare the next generation of surgeons for nanoscale procedures. It transforms abstract chemical structures into tangible, interactive 3D environments.

• 3D Molecular Visualization 🧬: Users can interact with complex structures like DNA, Hemoglobin, and Insulin, rendered in real-time.
• Precision Training Simulator 🎯: A gamified environment that tracks the user's surgical dexterity. It measures metrics such as $$ \text{Precision} $$, $$ \text{Speed} $$, and $$ \text{Steadiness} $$, calculating an overall $$ \text{Accuracy Score} $$ based on the deviation from the ideal surgical path: $$ \text{Score} = \max\left(10, 100 - \lfloor d \times 10 \rfloor\right) $$ where $$ d $$ is the distance from the target.
• Performance Analytics 📊: A dashboard that visualizes learning curves and ROI, comparing traditional training methods against mixed-reality simulation.
• Gamified Progression 🎮: An achievement system that rewards consistency and accuracy, keeping trainees engaged through badges and skill trees.

🛠️ How we built it

We built MolecuSculpt using a modern web stack optimized for performance and interactivity:

• Core Framework ⚛️: We used React and TypeScript for a robust, type-safe codebase.
• 3D Rendering 🧊: We leveraged Three.js to render high-fidelity molecular models (DNA helices, proteins) directly in the browser, ensuring 60fps performance for a smooth experience.
• UI/UX 🎨: The interface was built with Tailwind CSS and Shadcn/UI components for a clean, medical-grade aesthetic. We used Framer Motion to create fluid transitions between the dashboard, simulator, and case library.
• State Management & Storage 💾: We utilized GitHub Spark's KV store to persist user metrics, best scores, and training history, enabling a continuous learning experience across sessions.
• Math & Logic 🧮: We implemented custom algorithms to calculate hit detection and precision metrics in the 2D simulation environment, mimicking the tracking data we would receive from an MX Ink stylus.

🧩 Challenges we ran into

• Visualizing Complexity 🕸️: Rendering complex molecules like Hemoglobin without sacrificing performance was difficult. We had to optimize the MoleculeViewer component to handle numerous atoms and bonds efficiently using Three.js primitives.
• Simulating Precision on the Web 🖱️: Translating the feeling of a mixed-reality stylus (MX Ink) to a standard 2D web interface for the demo required creative input handling. We had to create a mouse/touch-based "Training Simulator" that effectively conveyed the concept of steadiness and precision tracking.
• Data Persistence 🔄: Ensuring that a user's training progress (metrics like $$ \text{Precision} $$ and $$ \text{Speed} $$) was saved reliably using the key-value store while updating the UI in real-time required careful state management.

🏆 Accomplishments that we're proud of

• Seamless 3D Integration 🌐: We successfully integrated a fully interactive 3D molecule viewer that allows users to explore atomic structures with intuitive controls.
• Real-time Analytics 📈: Building a dashboard that instantly updates charts and calculates ROI based on user performance feels incredibly professional and valuable.
• The "Spark" of Reality ✨: We are proud of how the "Training Simulator" gamifies the learning process. Seeing the accuracy score update in real-time creates a genuine feedback loop that encourages users to improve their steadiness.

🧠 What we learned

• The Power of Feedback Loops 🔁: We learned that immediate visual feedback (like the shrinking timeline and real-time scoring in the simulator) significantly impacts user focus and performance.
• Molecular Geometry 📐: We gained a deeper appreciation for the geometry of biological structures. Positioning atoms in 3D space to represent DNA required understanding the underlying helical math: $$ x = r \cos(\theta), \quad y = r \sin(\theta), \quad z = c \theta $$
• Spark Development ⚡: We learned how to effectively use GitHub Spark's environment to rapidly prototype and deploy a complex application with persistent data without needing a heavy backend infrastructure.

🔮 What's next for MolecuSculpt Surgery at the Molecular Scale

• Full MX Ink Integration 🖊️: Moving beyond the web mouse simulation to support actual WebXR API input from the MX Ink stylus for 6DOF (Six Degrees of Freedom) tracking.
• Multi-User Surgery 👥: Implementing a multiplayer mode where a lead surgeon can guide a trainee through a complex molecular reconstruction in real-time.
• Expanded Case Library 📚: Adding more complex pathologies, such as CRISPR-Cas9 gene-editing scenarios, allowing users to practice "cutting" DNA strands at specific base pair coordinates.
• Haptic Feedback 👋: Exploring WebHaptics to simulate the physical resistance of molecular bonds breaking and forming.

Built With

• css3
• featuring-the-technologies-used-in-the-project:-##-built-with-react
• framer-motion
• github-codespaces
• github-spark
• here-is-the-**built-with**-section
• html5
• lucide-react
• phosphor-icons
• radix-ui
• tailwind-css
• three.js
• typescript
• vite