Embodied-Cognition-Digital-Arboretum

Mix genes from different kingdoms to create a chimeric synthetic organism - something that doesn't exist in nature!

Comment

Inspiration

The year is 2025, and we're on the brink of interplanetary colonization—yet the tools for designing life capable of surviving alien worlds remain locked behind decades of specialized training. We asked ourselves: What if designing an organism for Mars was as intuitive as assembling LEGO bricks?

Our inspiration came from three converging frontiers:

  1. The Astrobiology Gap — NASA's search for life on Europa and Mars reveals incredible extremophiles on Earth, but no accessible tools exist for exploring engineered organisms for these environments
  2. The Democratization of AI — Large language models like Claude can now reason about complex biological systems, making expert-level synthetic biology accessible to students, artists, and dreamers
  3. The "Wood Wide Web" — We were fascinated by how fungi create kilometer-scale underground networks, transferring nutrients between trees. Could we design chimeric organisms that combine such traits with bacterial radiation resistance for terraforming?

We wanted to build a playground where imagination meets molecular biology—where a student can ask "What would a bioluminescent, radiation-resistant, nitrogen-fixing organism look like?" and receive a scientifically-grounded answer with visualizations they can rotate in 3D.

What it does

Digital Arboretum is an AI-powered synthetic biology platform that transforms trait-based organism design into an interactive, visual experience:

🧬 Design Chimeric Organisms

Select from 73+ biological traits across 10 scientifically-curated categories:

  • Extremophile traits from Deinococcus radiodurans (survives 5,000+ Gy radiation)
  • Marine adaptations like bioluminescence from Aequorea victoria
  • Fungal networks inspired by the 2,400-acre Armillaria ostoyae
  • Synthetic constructs including CRISPR self-repair and biosensors

Each trait includes source organisms, molecular mechanisms, and peer-reviewed references.

🔬 AI-Generated Genetic Sequences

Claude Sonnet 4 intelligently generates realistic sequences based on your trait combinations:

  • DNA — Double helix for complex genomic traits
  • RNA — Single strand with hairpin loops for regulatory elements
  • Protein — Folded polypeptide chains for structural/enzymatic traits
  • Plasmid — Circular DNA for bacterial engineering constructs

The AI automatically determines the appropriate output structure—selecting radioresistance + biosensor yields a plasmid; combining spider silk + antifreeze proteins produces a fusion protein.

🌍 Planetary Environment Simulation

Test your designed organism's survival probability on:

  • Mars — UV radiation, perchlorate soil, -60°C average temperature
  • Europa — Sub-ice ocean, extreme pressure, radiation bombardment
  • Titan — Methane lakes, -179°C, dense nitrogen atmosphere
  • Venus — 470°C surface, sulfuric acid clouds, crushing pressure

The AI provides detailed survival analysis with adaptation recommendations.

🔄 Evolutionary Optimization

Run genetic algorithms over 100-500 generations to optimize organism fitness:

  • Track emergent traits across generations
  • Visualize fitness history curves
  • Explore evolutionary trade-offs between competing adaptations

🧪 Synthesis Planning

Generate actionable DNA assembly plans for real laboratory work:

  • Codon optimization for E. coli, Yeast, Mammalian, or Plant expression
  • Assembly methods: Gibson Assembly, Golden Gate, Traditional Cloning
  • Risk assessment and vendor recommendations

How we built it

Architecture

We built Digital Arboretum as a Next.js 16 App Router application with a clean separation between AI services and visualization:

┌─────────────────┐     ┌──────────────┐     ┌─────────────────┐
│   React Three   │◄───▶│   Organism   │◄───▶│   Claude API    │
│   Fiber + drei  │     │   Context    │     │   (Anthropic)   │
│   (3D Viz)      │     │   (State)    │     │   /api/*        │
└─────────────────┘     └──────────────┘     └─────────────────┘

Tech Stack

Layer Technology
Framework Next.js 16, React 19, TypeScript 5
Styling Tailwind CSS 4 with OKLCH color space
Components Radix UI primitives + shadcn/ui
3D Graphics Three.js r181 + React Three Fiber 9 + drei
AI Engine Claude Sonnet 4 via Anthropic SDK
Charts Recharts for evolutionary fitness visualization

Key Technical Achievements

1. Real-time 3D Genetic Structures

We implemented four distinct 3D visualizations using React Three Fiber:

// DNA: Classic B-form double helix with base pair coloring
const complementary = { A: "T", T: "A", G: "C", C: "G" }
// Two intertwined phosphate backbones with connecting rungs

// RNA: Single strand with hairpin loop secondary structure  
const loopPhase = Math.sin(t * Math.PI * 4) * 0.5
// Winding path with 5'/3' end markers

// Protein: Folded polypeptide with α-helices and β-sheets
const helixPhase = Math.sin(t * Math.PI * 6) * 0.4
// Active site highlighting + amino acid coloring

// Plasmid: Circular DNA with oriC, MCS, and resistance markers
// Supercoiling effect + base pair visualization

2. Intelligent Structure Type Detection

The AI automatically determines output structure based on trait combinations using a weighted scoring system:

$$ \text{StructureType} = \arg\max_{s \in {DNA, RNA, Protein, Plasmid}} \sum_{t \in \text{Traits}} w_{s,t} $$

3. Scientific Trait Database

We curated 73+ traits with:

  • Source organisms (e.g., Pyrococcus yayanosii for pressure adaptation)
  • Gene identifiers (e.g., RecA/DdrB for radioresistance)
  • Molecular mechanisms with Wikipedia, NCBI, and Nature references
  • Bilingual naming (English + Traditional Chinese)

4. Dark Biotech Aesthetic

Our UI draws from deep-sea bioluminescence and laboratory interfaces:

  • OKLCH color space for perceptually uniform gradients
  • Bioluminescent green (#00ff9d) accents on dark backgrounds
  • JetBrains Mono for sequence display, Inter for UI

Challenges we ran into

1. 3D Performance with Dynamic Sequences

Rendering 100+ nucleotide base pairs with real-time rotation was causing frame drops. We solved this by:

  • Limiting display sequences to 60-80 characters for visualization
  • Using useMemo to cache geometry calculations
  • Implementing LOD (Level of Detail) with simplified geometries for distant views

2. Structure Type Ambiguity

Some trait combinations could logically produce multiple structure types. For example, "C4 Photosynthesis" could be a genomic DNA edit OR an mRNA transcript. We developed a weighted scoring system where traits vote for their most likely structure, with custom traits defaulting to protein (the most visually versatile).

3. Claude's Sequence Generation Consistency

Early prompts produced inconsistent sequence lengths and formats. We refined our system prompts to specify:

  • Exact output format (FASTA-style headers)
  • Length constraints based on structure type
  • Biologically plausible codon usage

4. State Synchronization Across Features

The DNA Designer, Environment Simulator, Evolutionary Optimizer, and Synthesis Interface all need access to the same organism state. We implemented a centralized OrganismContext using React Context with proper memoization to prevent unnecessary re-renders.

5. Bilingual Scientific Terminology

Finding accurate Traditional Chinese translations for terms like "Chromatophore System" (色素細胞系統) or "Mycorrhizal Symbiosis" (菌根共生) required extensive research across academic papers.

Accomplishments that we're proud of

✨ 73+ scientifically-referenced traits with source organisms, mechanisms, and peer-reviewed citations

🧬 Four distinct 3D genetic structure visualizations (DNA helix, RNA hairpins, protein folds, circular plasmids) with accurate base pair coloring

🪐 First-of-its-kind planetary survival simulator for designed organisms on Mars, Europa, Titan, and Venus

🔄 Real evolutionary optimization with genetic algorithms tracking fitness over 500 generations

🎨 Beautiful dark biotech aesthetic that makes synthetic biology feel like science fiction come to life

🌐 Bilingual support with Traditional Chinese naming for all 73+ traits

📚 Educational depth — every trait links to Wikipedia, NCBI, and Nature papers for deeper learning

What we learned

Technical Insights

  • React Three Fiber is incredibly powerful for scientific visualization, but requires careful attention to geometry instancing for performance
  • Claude Sonnet 4 excels at biological reasoning when given structured prompts with clear output formats
  • OKLCH color space in Tailwind CSS 4 creates stunning, perceptually-uniform gradients perfect for data visualization

Domain Knowledge

  • We gained deep appreciation for extremophile biochemistry — organisms like Deinococcus radiodurans have multiple genome copies that allow them to rebuild shattered DNA
  • Understanding genetic structure types (when to use plasmids vs. mRNA vs. proteins) required thinking like a synthetic biologist
  • Tardigrades can survive space vacuum through trehalose vitrification — essentially turning into glass

Design Philosophy

  • Scientific accuracy and beautiful UI are not mutually exclusive
  • Real-time 3D feedback dramatically increases engagement with complex concepts
  • Bilingual support matters for global accessibility in science education

What's next for Embodied-Cognition-Digital-Arboretum

Near-term Roadmap

  1. BLAST Integration — Connect generated sequences to NCBI BLAST for homology searches
  2. Export to Lab Formats — GenBank, FASTA, and Benchling-compatible outputs
  3. Collaborative Design — Real-time multiplayer organism design sessions
  4. Mobile Support — Responsive 3D viewers for tablets and phones

Medium-term Vision

  1. Metabolic Pathway Simulation — Model resource flows and energy production
  2. Ecological Modeling — Simulate organism interactions in planetary ecosystems
  3. Physical Prototyping — Partner with DNA synthesis companies for one-click ordering
  4. VR Experience — Walk inside your designed organism's cellular machinery

Long-term Dream

We envision Digital Arboretum becoming the Figma for synthetic biology — a collaborative platform where scientists, artists, students, and dreamers can explore the design space of life itself. From classroom education to speculative design to actual terraforming research, we want to make the molecular frontier accessible to everyone.

"Any sufficiently advanced biology is indistinguishable from magic." — We're building the wand. 🪄🧬

Built With

  • claude-sonnet-4-(anthropic)
  • next.js-16
  • radix-ui
  • react-19
  • react-three-fiber
  • recharts
  • shadcn/ui
  • tailwind-css-4
  • three.js
  • typescript-5
  • vercel
  • zod
Share this project:

Updates