Neon Tetris
A visually striking Tetris implementation built with React 19, TypeScript, and Framer Motion. Features a neon-glow aesthetic with color-coded tetrominos, ghost piece previews, hard drop animations, persistent high scores, and a challenging New Game+ mode with 2× scoring and 40% faster drops.
Neon Tetris Video Walkthrough
Start Screen
Built as a Google AI Studio project using Vite and Tailwind CSS v4 with shadcn/ui components. The game engine runs on requestAnimationFrame for buttery-smooth 60fps gameplay. Collision detection, wall kicks, and line clearing are implemented from scratch in a custom useTetris hook with zero game framework dependencies. Responsive mobile controls with touch-optimized buttons complement full keyboard support on desktop.
Mid-Game Active Gameplay
The Game
Neon Tetris is a from-scratch implementation of the classic block-stacking puzzle game, wrapped in a modern neon-glow visual identity. Every tetromino emits a colored glow (cyan for I-pieces, purple for T-pieces, red for Z-pieces), creating a visually immersive experience against the dark grid backdrop.
Game Engine
The entire game engine lives in a single custom React hook, useTetris. No game framework, no ECS, no physics library. Just React state and requestAnimationFrame:
Core Loop
The game loop uses delta-time accumulation instead of setInterval. A requestAnimationFrame callback tracks elapsed time and triggers piece drops when the accumulator exceeds the current speed threshold. This ensures consistent gameplay regardless of frame rate.
Collision Detection
Piece collision checks run against the full 10×20 grid on every movement. The algorithm iterates through each occupied cell in the piece's shape matrix and checks for:
- Boundary collisions: left/right walls and floor
- Stack collisions: occupied cells in the placed grid
Wall Kicks
When a rotation would cause a collision, the engine attempts horizontal offsets in alternating directions (±1, ±2, etc.) until the piece fits or the maximum offset is exceeded. This allows smooth rotation near walls and stacked pieces.
Visual Design
The neon aesthetic is achieved entirely through Tailwind CSS:
| Piece | Color | Glow |
|---|---|---|
| I | cyan-400 | rgba(34,211,238,0.8) |
| T | purple-500 | rgba(168,85,247,0.8) |
| S | green-500 | rgba(34,197,94,0.8) |
| Z | red-500 | rgba(239,68,68,0.8) |
| O | yellow-400 | rgba(250,204,21,0.8) |
| L | orange-500 | rgba(249,115,22,0.8) |
| J | blue-500 | rgba(59,130,246,0.8) |
The background uses four radial gradient layers (cyan, purple, red, green) positioned at each corner of the viewport, creating a subtle ambient glow that matches the tetromino palette.
New Game+ Mode
For players who find the standard mode too easy, New Game+ starts at 40% faster drop speed and awards 2x score for every line clear. The mode is indicated by a pulsing purple badge above the game board. Score multipliers stack with the standard level-based scaling. Clearing 4 lines (a Tetris) in New Game+ at level 5 earns 800 x 5 x 2 = 8,000 points.
