Isometric Press Grid

Description

**An isometric board where the tiles near your finger rise like keycaps, at 60fps, entirely on the UI thread.** Most grid animations run in reading order: item 1, item 2, item 3. This one runs in *space*. Every tile measures its own distance to your finger, frame by frame, and responds with a squared falloff: the tile under your touch rises the most, its neighbors a little, the far corner not at all. Drag across the board and a pressure wave follows you. Let go and everything settles on a spring. Two patterns do all the work, and they compose: 1. **A live distance field.** Each tile derives its lift from `distance(finger, tile)` inside a `useDerivedValue`: no state, no triggers, no re-renders. It's the tap-ripple grid you've seen before, but continuous instead of delayed, so it scrubs perfectly with the finger at any speed. 2. **An inverse-projection lift.** The grid is laid out flat and projected to isometric with one container transform (`rotate 45°`, then a 2:1 squash). That means "straight up on screen" has to be translated *back* into grid-local coordinates, and for 2:1 iso the inverse turns out to be beautifully simple: `translate(-d√2, -d√2)`, equal negative x and y. ### What you'll learn - Projecting a flat grid to isometric with a single transform, and why the transform *order* matters - Precomputing each cell's projected center so the gesture needs zero per-frame inverse math - Shaping a pressure field with a squared falloff (soft shoulders, sharp center) and choosing between screen-circular and grid-circular distance - Gating the whole field with one spring (`withSpring(1)` on touch, `withSpring(0)` on release) so press-in and lift-off feel physical while per-frame motion stays a pure derivation - Faking 3D extrusion with three stacked layers per tile: a shadow pit that never moves, a side body at half lift, the face at full lift, so thickness grows with height for free ### The personality knobs Everything that defines the feel is a named constant at the top: `MAX_LIFT` (keycap height), `FIELD` (how many neighbors wake), `SIDE_LIFT` (extrusion thickness), `SQUASH` (the iso angle), and the press/release spring configs. Retune the whole toy in five numbers. Built with **Reanimated v4** and **Gesture Handler**. One `GestureDetector`, two shared values for the finger, one spring gate: 100 tiles, zero re-renders while animating. Works with a mouse cursor on web too.

Installation

bunx @animatereactnative/cli@latest add isometric-press-grid

npx @animatereactnative/cli@latest add isometric-press-grid

yarn @animatereactnative/cli@latest add isometric-press-grid

pnpm dlx @animatereactnative/cli@latest add isometric-press-grid

Preview

Source code