LifeLab is a high-performance, aesthetically refined implementation of Conway's Game of Life. It transcends the typical "grid of squares" to offer a mesmerizing, product-grade experience with dynamic blooming, curated color themes, and intuitive interaction tools.
Made with ❤️ by MuchuCAT
- Hypnotic Bloom: A "breathing" glow effect that reacts to simulation density and activity.
- Curated Themes: Switch instantly between styles:
- 🌙 Chill Night: Deep violet/indigo hues on a dark navy background.
- 🧪 Neon Lab: High-contrast cyber-green and electric blue on black.
- 📜 Paper Ink: A crisp, legible light mode with slate tones.
- Dynamic LOD: The rendering engine adapts to your zoom level—showing individual cell shapes (circles/rounded rects) up close, and optimized density heatmaps when viewing the entire infinite-like grid.
- Pattern Stamping: Don't just place pixels. Stamp complex lifeforms like Gosper Glider Guns, Pulsars, and Spaceships directly onto the grid.
- Smart Selection: Drag to select areas, then export them as RLE (Run Length Encoded) text to share with the community.
- Cinematic Mode: Press
Hto hide the UI and immerse yourself in the simulation. - Time Control: Pause, step frame-by-frame, or fast-forward (up to 50x) to watch civilizations rise and fall in seconds.
- URL State: The entire world state—including the random seed, rules, and camera position—is encoded in the URL. Share a link, and your friend sees exactly what you see.
- Local Saves: Three browser-local memory slots to keep your favorite experiments safe.
- Node.js (v18 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/MuchuCAT/lifelab.git cd lifelab -
Install dependencies
npm install
-
Start the development server
npm run dev
Open
http://localhost:5174in your browser. -
Build for production
npm run build
- Frontend: React 18, TypeScript, Vite
- Rendering: PixiJS v8 (WebGL accelerated)
- State Management: Zustand
- Styling: TailwindCSS
- Icons: Lucide React
| Key | Action |
|---|---|
| Left Click | Draw / Stamp / Select |
| Right Click | Pan Canvas |
| Scroll | Zoom In/Out |
| Space | Pause / Play |
| S | Step Forward (1 Tick) |
| R | Randomize Grid |
| C | Clear Grid |
| H | Toggle UI (Cinematic Mode) |
| F | Fit Content to Screen |
Contributions are welcome! If you have ideas for new patterns, themes, or optimizations:
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature). - Commit your changes (
git commit -m 'Add some AmazingFeature'). - Push to the branch (
git push origin feature/AmazingFeature). - Open a Pull Request.
Enjoy the simulation.