---
id: "2115758026405929072"
source: https://x.com/titoys90/status/2115758026405929072
author: "tito.png (@titoys90)"
media: "video, 1080x1080, 26.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Falling Letter Tile Word Game

## Summary
A browser word puzzle that crosses a falling-block game with letter tiles: ivory serif tiles drop down a dark green dotted well, and lining them up left to right or top to bottom spells words that clear and score. A side panel shows the next piece, the rule, a running list of spelled words with points, and a grid of soft square control buttons with one violet slam key. A calm, editorial take on an arcade mechanic.

## Style
- Theme: mixed (dark green play well inside a warm stone-grey interface)
- Mood: calm, clever, tactile, editorial, cozy
- Tags: word-game, falling-blocks, letter-tiles, serif-ui, game-panel, keyboard-controls, score-list, violet-accent
- Category: Games, Web app

## Palette
| Role | Hex |
|---|---|
| Play well green | #182422 |
| Stone background | #E7E4DF |
| Panel grey | #D8D6D0 |
| Card light | #E0DED9 |
| Button grey | #D9D8D3 |
| Divider | #CDCCC7 |
| Muted label | #B6B6B3 |
| Slam violet | #7474A4 |
| Tile ivory | #F6F3EC |
| Bonus violet | #6F5CE6 |

## Typography
- Game title in the header: book serif, regular, title case, about 3% of frame height, next to a small round emblem (placeholder). Libre Caslon Text or EB Garamond.
- Tile letters: serif capitals, regular, centred on 40px tiles, with a tiny point value in the corner. Libre Caslon Text.
- Word list ("DATE", "LED"): serif capitals, 15px, tracking 0.02em; scores right-aligned in violet monospace 9px ("+10").
- Rule card ("3+ letters"): violet serif heading, followed by small grey monospace body text. IBM Plex Mono for the body.
- Micro labels ("Level", "Words", "Score", "Next", "Words spelled", key hints): 8px uppercase monospace with wide tracking. IBM Plex Mono.

## Layout
- 1:1 frame (1080x1080), the game centred on stone grey.
- Two-column layout: play well about 56% of the width on the left, side panel about 30% on the right, 24px gap.
- Header row above both: title left, a three-cell stat strip (Level, Words, Score) plus a "Sound on" toggle right; cells are 1px bordered boxes with 4px radius.
- Play well: 10 columns by 16 rows of 40px cells, dark green with a faint dotted grid (1px dots every cell), 6px radius, soft inner shadow.
- Side panel stacks: Next plus Rule card, Words spelled list (tall card), 3x2 control button grid (48px square buttons, 6px radius), and two lines of key hints.
- Cards use 1px #CDCCC7 borders, no shadows.

## Elements
- Letter tiles: ivory squares with a 1px darker bottom edge and 3px radius; violet tiles mark double-word bonuses.
- Falling piece: two to four connected tiles; a dashed green outline ghost shows where it will land at the bottom.
- Next preview: dark square showing the upcoming piece in miniature.
- Words spelled list: newest word at the top, each row with a score in violet, separated by hairlines.
- Control grid: left, rotate, right, shuffle, soft drop, and a violet hard-drop button with a white down-to-line icon.
- Stat strip: Level, Words (for example 2/4) and Score, numbers in serif.
- Key hint footer: small keycap boxes with labels move, rotate, shuffle, soft drop, slam, pause.

## Motion
- Pieces step down one cell every 500 to 700ms with no easing, like a classic falling-block game.
- Hard drop slams a piece to the ghost position in about 80ms.
- When a word forms, its tiles flash, then clear over about 250ms and the tiles above fall to fill the gap (150ms per row).
- New words are prepended to the list with a 200ms fade and slide down of the existing rows; the score ticks up.
- Rotate is instant (a 90 degree turn of the piece layout).
- Gameplay loops over 26 seconds across two levels.

## Rebuild it
1. React state for a 10x16 grid, the active piece (letters and offsets), the next piece and a dictionary Set; a game loop with `setInterval` that steps the piece.
2. Well: `grid grid-cols-10 bg-[#182422] rounded-md` with a dotted background (`radial-gradient(#2E3B38 1px, transparent 1px) 0 0 / 40px 40px`).
3. Tiles: `size-10 bg-[#F6F3EC] rounded-[3px] border-b-2 border-black/15 font-serif text-xl`; animate with Motion `layout` so falling and clearing are smooth.
4. Clearing: wrap tiles in `AnimatePresence` with `exit={{ scale: 0.6, opacity: 0 }}` over 0.25s.
5. Word list: `AnimatePresence` with `initial={{ opacity: 0, y: -8 }}` on new rows; scores in `font-mono text-[#6F5CE6]`.
6. Controls: a `grid grid-cols-3 gap-2` of 48px buttons, the slam key `bg-[#7474A4] text-white`; bind ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Space, C and P.

## Generation prompt
A calm browser word puzzle game in a warm stone-grey interface: a tall dark green well with a faint dotted grid where ivory serif letter tiles fall in small groups and stack at the bottom, a dashed ghost outline showing the landing spot, a side panel with a next-piece preview, a rule card, a list of spelled words with small violet scores and a grid of soft square control buttons with one violet slam key; editorial serif and monospace type.