Create a dynamic, elastic image effect for your Framer websites. Image Hover turns any image into a flexible WebGL surface that smoothly bends, stretches, and reacts to your cursor.
Live Preview: https://elasticimage.framer.website/
Gumroad Link: https://rohitanand.gumroad.com/l/thfro?wanted=true
Elastic Image Distortion — Create smooth, organic image deformation.
Hover & Drag Modes — Choose between simple hover interaction or click-and-drag deformation.
Custom Image — Upload any image directly through Framer.
Adjustable Physics — Control stiffness, damping, pull strength, grab radius, and wobble.
3D Tilt — Add depth with adjustable surface tilt.
Dynamic Shading — Create a more dimensional, realistic surface.
Grid Overlay — Optional customizable grid with density, opacity, and color controls.
Custom Colors — Configure fallback gradient colors and highlights.
Border Radius — Easily match the component to your design.
Responsive — Automatically adapts to the size of the Framer frame.
Touch Support — Works with pointer and touch interactions.
Performance Optimized — WebGL rendering pauses when the component is outside the viewport.
Static Renderer Support — Uses a static image/gradient fallback during Framer static rendering and export.
Reduced Motion Support — Automatically respects the user's reduced-motion preference.
Use it for hero sections, portfolios, project showcases, galleries, product previews, creative landing pages, cards, and interactive image presentations.
Drop it into your Framer project, upload an image, choose Hover or Drag, and customize the physics to create your own interaction.
