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.
npx shadcn@latest add https://ui.aryank.space/r/flip-tile-board.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| frontImage / backImage | string | BLANK photographs | Sliced across the fronts and the backs of the grid. |
| rows / cols | number | 6 / 6 | The 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 / cooldown | number | 50 / 1000 | Cursor highlight cell size in px, and per-tile re-entry lockout in ms. |
flipLabeltextLabel on the flip-all button.
brandtextWordmark in the nav.
gsap