The Ultimate 3D Virtual Pet Creator
ASCII art pets rendered in stunning 3D with bloom post-processing, cinematic particles, AI-powered chat, and a dark cyberpunk UI.
Features • Quick Start • Tech Stack • Species • Architecture • Contributing
- Canvas-based ASCII textures — ASCII art rendered to canvas with glow/shadow, applied as 3D textures for perfect readability
- Post-processing pipeline — Bloom + Vignette for cinematic, neon-lit aesthetics
- Dynamic lighting — Intensity adapts to pet mood (bright when happy, dim when sad)
- 30 floating particles — Octahedrons with mood-matching colors orbit your pet
- Starfield background — 600 procedural stars with fade and drift
Each with hand-crafted ASCII art, distinct color palettes, rarity levels, and AI personality profiles.
| Species | Rarity | Personality |
|---|---|---|
| 🦅 Phoenix | Legendary | Wise, poetic, dramatic |
| 🐉 Dragon | Epic | Proud, protective, formal |
| 🦄 Unicorn | Rare | Graceful, dreamy, kind |
| 🤖 Robot | Rare | Logical, helpful, data-driven |
| 🐺 Wolf | Uncommon | Stoic, loyal, observant |
| 🦉 Owl | Uncommon | Wise, thoughtful, nerdy |
| 🦊 Fox | Uncommon | Clever, witty, mischievous |
| 👻 Ghost | Uncommon | Mysterious, playful, spooky |
| 🐱 Neko | Common | Playful, curious, sassy |
| 🟢 Slime | Common | Bubbly, innocent, excitable |
| 🐢 Turtle | Common | Patient, calm, slow |
| 🐰 Bunny | Common | Hyperactive, adorable, giggly |
- Talk to your pet using LLM (z-ai-web-dev-sdk)
- Responses are character-driven — each species has a unique personality
- Pet mood and stats influence dialogue naturally
- Conversations persist per session
- 🍖 Feed — Restore hunger (5 tokens)
- 🎮 Play — Boost happiness (8 tokens)
- 💪 Train — Gain XP & health (12 tokens)
- 💊 Heal — Restore health (6 tokens)
- 😴 Rest — Recharge energy (4 tokens)
- 🤗 Pet — Show affection (3 tokens)
- Token tracking — Every interaction costs tokens, visible in real-time
- Action counter — Track total interactions per session
- XP & leveling — 50 XP per level with progress bars
- Mood system — Ecstatic → Happy → Neutral → Sad → Critical
- Dark cyberpunk aesthetic with 1px border radius throughout
- 3-column layout — Pet list | 3D viewport | Info panel
- Tabbed bottom panel — Switch between Actions and Chat
- Framer Motion animations — Smooth transitions everywhere
- Responsive design — Works on desktop and mobile
- Node.js 18+ or Bun
- Git
# Clone the repository
git clone https://github.com/smouj/asciicritters.git
cd asciicritters
# Install dependencies
bun install
# Set up database
bun run db:push
# Start development server
bun run devOpen http://localhost:3000 to see your pets.
# .env
DATABASE_URL="file:./db/custom.db"| Category | Technology | Purpose |
|---|---|---|
| Framework |  |
App Router, SSR, API routes |
| Language |  |
Type safety |
| 3D Engine |  |
WebGL rendering |
| React 3D | @react-three/fiber + @react-three/drei | React bindings for Three.js |
| Post-FX | @react-three/postprocessing | Bloom, Vignette |
| UI Library | shadcn/ui + Radix | Component system |
| Styling |  |
Utility-first CSS |
| Animations | Framer Motion | UI transitions |
| Database |  |
ORM + SQLite |
| AI Chat | z-ai-web-dev-sdk | LLM pet conversations |
| State | Zustand + TanStack Query | Client + server state |
asciicritters/
├── src/
│ ├── app/
│ │ ├── page.tsx # Main UI (3-column layout)
│ │ ├── layout.tsx # Root layout + fonts
│ │ ├── globals.css # Dark theme + CSS variables
│ │ └── api/
│ │ ├── species/route.ts # GET /api/species
│ │ └── pets/
│ │ ├── route.ts # GET/POST /api/pets
│ │ └── [id]/
│ │ ├── route.ts # GET/DELETE /api/pets/:id
│ │ ├── action/route.ts # POST /api/pets/:id/action
│ │ └── chat/route.ts # POST/DELETE /api/pets/:id/chat
│ ├── components/
│ │ ├── pet/
│ │ │ └── ASCIIPetCanvas.tsx # Three.js 3D renderer
│ │ └── ui/ # shadcn/ui components
│ └── lib/
│ ├── pets/
│ │ ├── types.ts # Pet, Species, Chat interfaces
│ │ ├── species.ts # 12 species definitions + ASCII art
│ │ ├── generator.ts # Deterministic pet generation
│ │ ├── rng.ts # Mulberry32 PRNG
│ │ └── index.ts # Barrel exports
│ └── db.ts # Prisma client
├── prisma/
│ └── schema.prisma # Pet + PetAction models
├── public/
│ └── og-image.png # GitHub social preview
├── LICENSE # MIT
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
├── SECURITY.md
└── README.md
Each pet is generated using a Mulberry32 pseudo-random number generator seeded from the user ID. This means:
- The same user always gets the same pet for a given species
- Stats, rarity, and name are all reproducible
- No external randomness source needed
- Fair distribution with weighted rarity rolls
// From src/lib/pets/rng.ts
function mulberry32(seed: number): () => number {
return function () {
let t = (seed += 0x6d2b79f5);
t = Math.imul(t ^ (t >>> 15), t | 1);
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}🎨 Click to view all ASCII art
__ __
/ \ / \
/ .. \ / .. \
/ /\ \ / /\ \
/ / \ \ / / \ \
/ / \ \/ / \ \
/ / /\ \ /\ \ \
/ / / \ / \ \ \
/__/__/____\_____/____\___\
\ \ | | / /
\____\ | | /____/
\| |/
| |
_| |_
__====-_ _-====__
_--^^^#####// \\#####^^^--_
_-^##########// ( ) \\##########^-_
-############// |\^^/| \\############-
/############// (@::@) \\############\
/#############(( \\// ))#############\
/###############\\ (oo) //###############\
/################\\ / VV \ //################\
/###################\\ \\//###################\
/\_/\
( o.o )
> ^ <
/| |\
(_| |_)
" "
This project is licensed under the MIT License — see the LICENSE file for details.
Contributions are welcome! Please read CONTRIBUTING.md for guidelines.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-pet) - Commit your changes (
git commit -m 'Add new species: Octopus') - Push to the branch (
git push origin feature/amazing-pet) - Open a Pull Request
- Multi-pet collection view
- Pet trading between users
- Animated ASCII art (frame sequences)
- Sound effects for actions
- Pet evolution/evolution system
- Achievement badges
- Leaderboard (highest level pets)
- Custom ASCII art upload
- Mobile native app (React Native)
- Multiplayer features (battles, trading)
Built with ❤️ by the ASCIICritters Team