# Elastic Photo Mesh
> Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.
Canonical: https://gsapvault.com/effects/elastic-photo-mesh
Live demo: https://gsapvault.com/demos/elastic-photo-mesh/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | canvas, mesh-distortion, spring-physics, elastic, drag-interaction, velocity-reactive, touch-gestures |
| Uses Lenis | No |
## Overview
An interactive rubberized photograph rendered as a dynamic 2D spring-mass lattice on HTML5 canvas, powered by GSAP's core ticker with zero external 3D or WebGL dependencies.
Clicking and dragging anywhere on the image grabs the photo like a sheet of stretchable latex, physically pulling and deforming the texture with tactile elastic tension. On release, stored tension snaps back with a high-frequency twang and damped harmonic wave that reverberates across the entire photo surface. Moving the pointer without dragging leaves a subtle magnetic wake that jiggles the mesh in real time.
## Features
- Interactive 2D spring-mass lattice: subdivides any image into a high-density triangular mesh with interconnected structural springs
- Click-and-drag rubber stretch: smooth Gaussian-weighted grab radius lets users pinch, pull, and warp the photograph with tactile physical tension
- Snappy release twang & reverberation: stored elastic potential energy snaps back on release with damped gelatin oscillations propagating to the image borders
- Affine triangle texture mapping: pure HTML5 2D Canvas rendering via piecewise affine matrix transformations with zero WebGL overhead
- Hover magnetic wake: moving the cursor across the photo gently indents and ripples the rubber surface at 60fps
- Keyboard & click pluck impulses: pressing Space/Enter or tapping emits a localized elastic shockwave that echoes across the surface
- Preset elasticity modes: switch seamlessly between snappy Rubber, wobbly Jelly, and high-tension Taut presets
- Fully responsive & touch-enabled: works fluidly across desktop pointer drag and mobile touch gestures with Pointer Events API
- Zero plugin footprint: runs completely on GSAP core ticker with typed-array memory safety and resting-state sleep optimizations
## Use Cases
- Interactive hero showcases for creative studios, digital agencies, and photographers
- Playful, tactile product imagery for footwear, apparel, and hardware landing pages
- Engaging interactive portfolio pieces demanding unforgettable tactile feedback
- Editorial mastheads, digital magazine covers, and creative campaign centerpieces
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
The source image is subdivided into a 2D grid of vertices connected by structural and anchor springs stored in pre-allocated Float32Array buffers. When the user drags, vertices within the grab radius are displaced with smooth cosine falloff. GSAP's ticker runs an Euler integration loop that computes restoring forces toward resting anchor coordinates and neighbor shear relaxation. The deformed mesh is drawn in a single batched pass using canvas affine matrix transformations (ctx.setTransform) clipped to each triangle. When the mesh velocity drops below an idle threshold, the simulation sleeps to preserve CPU cycles until the next interaction.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML :**
```html
```
**2. Add before the closing tag:**
```html
```
No GSAP plugins are needed.
**3. Add the markup to your :**
```html
```
That is the whole contract: a container carrying `data-elastic-mesh` with one `` inside it. The script builds the `
