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
Highlights
- requestAnimationFrame game loop: 60fps rendering with delta-time accumulation for consistent drop speed
- Ghost piece system: translucent preview showing exactly where the active piece will land
- Hard drop with impact animation: flash overlay and vertical trail effect using Framer Motion AnimatePresence
- New Game+ mode: 2x score multiplier with 40% faster initial drop speed for experienced players
- Wall kick rotation: automatic horizontal offset when rotating near walls or stacked pieces
- Persistent high scores via localStorage with formatted monospace display
- 7 neon-glow tetrominos: each piece has a unique Tailwind color with box-shadow glow effect
- Full mobile controls: touch-optimized circular buttons for move, rotate, soft drop, and hard drop
- Level progression: speed increases by 10% per level, with level-up notification animations
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.
