Tetris — Liquid Glass Edition

A browser-based Tetris clone with an Apple Liquid Glass-inspired UI. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no build tools.

Features

• Instant lock — pieces lock the moment they touch down, no delay
• Ghost piece — shows where the current piece will land
• Hold queue — press
  C
  to store a piece for later
• Next queue — previews the next 5 upcoming pieces
• SRS rotation — Super Rotation System with full wall kick tables
• 7-bag randomizer — fair piece distribution, every set of 7 contains all pieces
• NES-style scoring — increasing speed per level, line clear multipliers
• DAS (Delayed Auto Shift) — smooth horizontal movement when holding left/right
• Procedural SFX — generated via Web Audio API, no external audio files
• Dynamic sizing — board auto-scales to fit any viewport

Controls

UI Design

The visual style is inspired by Apple's Liquid Glass design language:

• Animated background — floating gradient orbs with smooth motion, subtle grid overlay
• Frosted glass panels — translucent surfaces with
  backdrop-filter: blur()
  and inner light reflections
• Glass blocks — each tetromino cell has a gradient fill, specular highlight, inner shadow, and soft border
• Depth layering — multiple surface opacity levels create visual hierarchy
• Shimmer effects — animated gradient on the title, pulsing logo glow
• Smooth transitions — spring-based easing on buttons, fade-in overlays

Tech Stack

Project Structure

tetris-glass/
├── index.html      Main page — game screens, overlays, attribution
├── style.css       Design tokens, glass components, animations, responsive
├── game.js         Game engine — board, pieces, input, rendering, audio
└── README.md

Scoring

Level increases every 10 lines cleared, which also increases the gravity speed.

Speed Curve

Running Locally

Any static file server works. For example:

Then open

License

MIT