# Tetris Loader

> A minimalist, high-contrast Tetris-inspired loading animation built with React and TypeScript. This component delivers a clean, pure black-and-white aesthetic with full dark mode support, creating a striking visual loading experience. Key Features:  Pure Monochrome Design: Exclusively uses black and white colors - no grays or intermediate shades Dark Mode Native: Seamlessly switches between black-on-white (light) and white-on-black (dark) themes Authentic Tetris Mechanics: All 7 Tetriminos with proper rotation, stacking, and line clearing Configurable Options:  Size: Small (8×16), Medium (10×20), or Large (10×20 with bigger blocks) Speed: Slow (150ms), Normal (80ms), or Fast (40ms) drop rates Loading Text: Customizable message or hide completely   Smooth Performance: 60fps animations using requestAnimationFrame Auto-Reset: Intelligently clears the grid when pieces stack too high

- Author: [Itai Zeilig](https://21st.dev/@itaizeilig)
- License: unknown
- Live preview: https://21st.dev/@itaizeilig/components/tetris-loader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/itaizeilig/tetris-loader?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt