---
title: "BlockGame — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Interactive. Playable Tetris block game component"
canonical: "https://framer.elliotli.dev/component/blockgame"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/BlockGame

# BlockGame

Playable Tetris block game component

[View on Framer](https://framer.com/marketplace/components/blockgame/?via=elliot-li)

![BlockGame preview image 1](https://framer.elliotli.dev/og/component/blockgame/b238121e4eee565f/1600x1200.jpg)

## Summary

Playable Tetris block game component

## Description

A fully playable Tetris-style block stacking game built entirely in Framer. Seven tetromino shapes fall from the top — move, rotate, and stack them to clear lines and score points. Speed increases every 10 lines. Full color, typography and border radius customization. Built for gaming sections, retro-themed sites, interactive portfolios, and entertainment features that need a genuinely playable experience.

## Features

-   Seven tetromino shapes — I, O, T, S, Z, J, L
    
-   Progressive difficulty — speed increases every 10 lines cleared
    
-   Maximum speed reached at level 10 and beyond
    
-   Scoring system — lines cleared × 100 × current level
    
-   Pause and resume button
    
-   Start game button for new game
    
-   Game over notification with final score display
    
-   Complete collision detection and line clearing algorithm
    
-   Keyboard controls — arrow keys and spacebar
    
-   Responsive layout adapts to container size
    
-   Full color customization — background, board, cells, blocks, text, cards, buttons
    
-   Typography controls for title and body fonts
    
-   Border radius control for all UI elements
    
-   No external dependencies
    

## Controls

-   **Left / Right Arrow** — move piece horizontally
    
-   **Down Arrow** — soft drop
    
-   **Up Arrow or Spacebar** — rotate piece 90° clockwise
    
-   **Start Button** — begin new game
    
-   **Pause / Resume** — pause or resume gameplay
    

## Scoring

-   Points — lines cleared × 100 × current level
    
-   Level up — every 10 lines cleared
    
-   Speed increases with each level up to level 10
    

## Property Controls

**Colors**

-   Background · Board Background · Cell Border
    
-   Placed Block · Text Color · Card Background
    
-   Button Color · Button Text Color
    

**Typography**

-   Title Font — main heading font controls
    
-   Body Font — UI and body text font controls
    

**Layout**

-   Border Radius — all UI elements (0–32px)
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8g2xwucg-Ol7n3e2MGOfbTyuvGsm8XNPZVbDswI)

## Technical Details

-   10 column × 20 row game board
    
-   Random tetromino spawning from 7 types
    
-   Standard 90° clockwise rotation system
    
-   Pieces lock immediately on landing
    
-   All complete rows cleared simultaneously
    
-   Keyboard event listeners with proper cleanup on unmount
    
-   React useState and useEffect for game state management
    
-   startTransition for optimized rendering
    
-   Proper cleanup prevents memory leaks
    

## Default Settings

-   Light gray background at 60% opacity
    
-   Monospace title font 32px · body font 15px
    
-   8px border radius
    
-   800×600px recommended size
    

## Size Recommendations

-   Minimum width 600px for comfortable gameplay
    
-   Minimum height 500px to display full board
    
-   Default 800×600px
    
-   Supports fixed and flexible sizing
    

## Use Cases

Gaming website sections · Interactive portfolio pieces · Retro-themed landing pages · Entertainment features · Skill demonstration projects · Fun brand experiences · Coming soon pages · Event websites

**SEO Keywords**

framer game component · framer tetris · framer block game · framer playable game · framer interactive game · framer retro game · framer puzzle game · framer gaming component · framer entertainment component · framer falling blocks · framer arcade game · framer fun component · framer interactive component · framer code component · framer game widget

## Rank history [How rankings work →](/terms#rankings)

-   All · #4013

## Details

- **Author**: Hamim Reza
- **Published**: 2026-04-16
- **Updated**: 2026-04-16
- **Added**: 2026-04-14
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase