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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tetris Loader to your project and fits it to your theme.

import TetrisLoading from "@/components/ui/tetris-loader";

export default function DemoOne() {
  return <TetrisLoading size="sm" speed="fast"/>;
}