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.
About This Effect
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.
Read the full effect overview
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.
What's Included
- 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
Perfect For
- 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
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.