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