This isn't just a game; it's a vibe. A relentless, cyberpunk-inspired battle of wits set in a world of neon glows, particle explosions, and immersive sound. Forget everything you know about tic-tac-toe. This is a high-octane, visually stunning duel where draws are impossible and every move feels epic.
- A New Philosophy: The Experience is Everything
- Core Gameplay Mechanics
- The Cinematic Transformation
- Technical Architecture
- Developer Experience (DX) First
- Getting Started
- How to Contribute
We started with a simple goal: to create a tic-tac-toe game that never ends in a draw. We achieved that with a simple, elegant rule—the 3-move rolling window.
But a great mechanic is nothing without a great experience. This project's new philosophy is that presentation matters. We've transformed a simple logic game into a polished, experience-driven product that's as much fun to watch and hear as it is to play.
- Draws Are Impossible: The game logic fundamentally prevents ties.
- Max 3 Moves Per Player: The board has limited space, forcing strategic trade-offs.
- FIFO Moves: On your 4th move, your 1st move is automatically removed. This "First-In, First-Out" system creates a constantly evolving battlefield.
- Three AI Difficulties: From a casual opponent to a ruthless, strategic AI.
This isn't just a facelift; it's a complete reimagining of the game's sensory experience.
- Dark, Neon-Infused Theme: A beautiful, easy-on-the-eyes dark mode with glowing neon accents.
- Glass Morphism UI: A modern, layered interface with blurred, semi-transparent surfaces.
- Dynamic Background: An animated cyberpunk grid and floating, glowing orbs create a sense of depth and atmosphere.
- High-Performance Particle System: Explosions for wins and piece removals are rendered on a
<canvas>for buttery-smooth performance.
- Robust Sound Engine: A custom
useSoundSystemhook manages all in-game audio. - Context-Aware Effects: Unique sounds for clicks, piece placements, removals, wins, and losses.
- Synthetic Fallback: If audio files fail to load, the system automatically generates synthetic sounds using the Web Audio API, ensuring the game never feels broken.
- Anime.js & Framer Motion: A powerful combination for fluid, physics-based animations.
- Screen Shake: Epic wins are punctuated with a satisfying screen shake effect.
- Interactive UI: Every button and cell responds to user interaction with subtle, delightful animations.
The project is built on a modern, professional-grade stack designed for performance, scalability, and an excellent developer experience.
- Engine: Pure, dependency-free TypeScript for the core game logic.
- UI: React, Vite, and Tailwind CSS.
- Animation: Framer Motion for React-based animations and Anime.js for targeted, high-performance DOM manipulation.
- Audio: Howler.js with a custom hook for a robust, fallback-first audio system.
- Particles: A custom, performant
<canvas>-based particle engine.
src/
├── components/
│ ├── Infinitoe.tsx # Main cinematic game component
│ └── ParticleSystem.tsx # High-performance canvas particle engine
├── engine/ # Core game logic (TypeScript)
├── hooks/
│ └── useSoundSystem.ts # Centralized audio management
├── public/
│ └── sounds/ # Location for game audio assets
└── index.css # Cyberpunk theme foundation & CSS variables
A great product is built with great tools. We've invested heavily in the DX to make this codebase a joy to work in.
- TypeScript: Strict type safety across the entire codebase.
- ESLint: Enforces code quality and best practices.
- Prettier: Provides automatic, consistent code formatting.
- Automated Scripts:
lint,format,build, anddevscripts are pre-configured for a seamless workflow.
# 1. Install dependencies
npm install
# 2. Start the development server
npm run dev
# 3. Open http://localhost:5173 (or the port shown in your terminal)npm run lint: Check for code quality issues.npm run format: Automatically format all code.npm run build: Create a production-ready build.
Ideas and contributions are welcome!
- Fork the repo.
- Create a new branch:
git checkout -b feature/your-amazing-idea - Make your changes.
- Commit your changes:
git commit -m 'feat: Add some amazing feature' - Push to the branch:
git push origin feature/your-amazing-idea - Open a new Pull Request.
Built with 💜 for the dopamine generation.