How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Grid: 120 × 160px tiles with 8px corners. Each tile is a step of 270px across and 310px down (a 150px gap), and every even row is shifted right by 125px for the brick pattern. Photos show at 70% opacity with a touch of extra contrast. Tiles cycle through 20 photos.
- Endless: only the tiles near the screen exist. The visible area (plus a 150% buffer on desktop, 80% on phones) is re-checked every 80–100px of movement or every 100–150ms, adding tiles ahead of the movement and removing ones far behind.
- Drag: the canvas follows the pointer through a smoothing step (8.5% of the remaining distance per frame). Letting go after a fast drag throws it further (velocity × 200). Touch drags move 1.5× faster.
- Intro: on load, after 1s, every tile pops from scale 0 to 1 (0.5s each) at random moments across one second.
- Expand: clicking a tile (not a drag) hides it and animates a copy from the tile's exact spot to the centre of the screen. The copy grows to 40% of the screen wide (75% on phones) with a 5:6 shape, over 1s on a sharp in-out curve. - A dark overlay fades in (0.3s) and the other tiles fade out. - After 0.5s the tile's title rises into view word by word (48px, white, centered, 0.1s apart). - Dragging is paused while a card is open.
- Close: clicking the card or the overlay sends the card back to the tile's spot (1s). The title words exit upward, and the other tiles fade back in after half a second.
- Fallbacks: reduced motion skips the intro pop and makes the expand instant.