← Back to Projects

XENOCHI

Tamagotchi-style evolution simulator — 5 stages, 32 Blender animations, Three.js rendering, hidden Battle Arena easter egg.

About

XENOCHI is an evolution simulator rebuilt from scratch with a full 3D pipeline — creature modeled, rigged, and animated in Blender (32 unique animations), loaded into the browser via Three.js FBX. The main game is vanilla JavaScript with no framework overhead; game state, stat decay timers, and evolution transitions are all hand-rolled.

Engineering Highlights

Shipped as a PWA with a service worker for offline support. Fully responsive — portrait and landscape layouts on mobile handled through a dedicated CSS layer that wins cascade without !important. Contextual audio management (music switching, training SFX) via the Web Audio API. The hidden Battle Arena easter egg is a separate React Three Fiber app with four hand-built 3D scenes, demonstrating the ability to work across both vanilla and React stacks.

Tech Stack

Three.js React Three Fiber Blender FBX Pipeline JavaScript SCSS Web Audio API PWA Service Worker

My Role

Solo — full pipeline from Blender (modeling, rigging, 32 animations) through game logic, state management, audio, and responsive frontend.

Project Type

Personal Project — Full-Stack Web Engineering & 3D

Key Features

Five Evolution Stages

Progress through blue, yellow, green, red, and transcendent white forms. Each stage increases size and unlocks new behaviors.

32 Custom Animations

Hand-crafted in Blender covering all care actions, evolutions, idle states, and the final qi-gong meditation loop.

Care System

Feed, dance, sleep, and train your creature. Stat decay creates urgency—neglect leads to deletion from the simulation.

Transcendent Final Form

The white stage shifts to meditation-only care with qi-gong idle animation and near-transparent existence.

Contextual Audio

Dynamic music switching based on game state with training sound effects and ambient atmosphere.

PWA & Mobile

Installable via service worker with offline support. Fully responsive across portrait, landscape, and tablet — no framework, pure CSS cascade.

The Evolution Arc

┌─────────────────────────────────────────────────────────────────┐
│                      EVOLUTION STAGES                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   🥚 GLITCHED EGG                                                │
│      │                                                           │
│      ▼                                                           │
│   🔵 BLUE ──────► 🟡 YELLOW ──────► 🟢 GREEN                     │
│                                        │                         │
│                                        ▼                         │
│                    🔴 RED ◄────────────┘                         │
│                      │                                           │
│                      ▼                                           │
│               ⚪ TRANSCENDENT WHITE                               │
│                 (Qi-Gong State)                                  │
│                                                                  │
├─────────────────────────────────────────────────────────────────┤
│  CARE ACTIONS: 🍎 Feed │ 💃 Dance │ 😴 Sleep │ 🥋 Train          │
│  FINAL STAGE:  🧘 Meditation Only                                │
└─────────────────────────────────────────────────────────────────┘
          

Easter Egg: Battle Arena

Dance Battle

Chrome cats under neon spotlights in a dance-off showdown.

Cyberpunk Arena

Fighting arena with neon-lit neopunk atmosphere.

Japanese Dojo

Animated cherry blossoms and lantern-lit bamboo poles.

Indigo Claw Dojo

Darker, meditative atmosphere for focused training.

Check it out