PRO

Flip Tile Board

One photograph cut across a six by six grid of tiles, with a second photograph on their backs. Each tile carries the same background sized six hundred percent and offset by its own column and row, so the grid reassembles a single image rather than showing thirty six copies. Hovering a tile spins it three quarters of a turn and back while yawing it sideways, and the yaw is picked from the tile's column so a row splays outward from the centre. A one second per-tile cooldown stops a fast sweep retriggering it. Over the top, a grid of fifty pixel cells lights its border under the cursor, and a button flips the whole board in a randomised stagger.

Component
Install
npx shadcn@latest add https://ui.aryank.space/r/flip-tile-board.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
frontImage / backImagestringBLANK photographsSliced across the fronts and the backs of the grid.
rows / colsnumber6 / 6The background offset step is fixed at twenty percent, which is what a six by six grid needs; other sizes re-slice but will crop.
blockSize / cooldownnumber50 / 1000Cursor highlight cell size in px, and per-tile re-entry lockout in ms.
Customize
flipLabeltext

Label on the flip-all button.

brandtext

Wordmark in the nav.

Dependencies
gsap