Image Warp Framer Component

About

One component, two interactions.

Move across it — as a cursor, or with a drag. The surface leans away from your hand, lags a beat behind, then eases back to flat once you stop.

Image Distortion is a WebGL ripple effect built for exactly those two moments: pointing, and dragging. The same physics works whether the image is following your pointer or living inside a carousel.

Use Cases

• A navigation list where the cursor becomes the preview — hover a name and the subject's photo materializes at the pointer, distorting with each movement. The image doesn't sit on the page. It follows you across it.
• A director or artist roster where the work finds the pointer — no thumbnail grid, no hover card. Just names, and an image that bends into view at the cursor the moment one is moused over. The whole page breathes without a single static preview.
• Product galleries and case-study carousels, on drag — the image resists a little as you pull it, the same way flipping a physical print would, instead of sliding past on rails.
• Anywhere a site owner has said "I want it to feel alive when someone touches it" — a portrait grid, a lookbook, a single hero image.

Fits photography portfolios, agencies, and product pages — anywhere the picture is the pitch.

Properties Panel

Setup

• Usage: Custom Cursor or Slideshow Slide
• Image
• Fit: Cover or Contain

Motion

• Strength: how much the image ripples
• Recovery: 0 = fluid, 1 = snappy — how fast it settles back to flat
• Overflow: how far the ripple can push past the frame edge

Slideshow only

• Group: slides sharing the same Group ripple together on drag — give a second Slideshow a different Group so it doesn't react to the first one
• Reset on Release: Snap or Fade (what happens the moment you let go of the drag)

Platform

• Enable on Touch: runs the WebGL effect on touch devices when on; shows a plain image with no ripple when off

Wondering if Image Distortion Framer Component is the website animation you want? Have a preview before purchasing. Once purchased, double click the URL file to remix the template.

Refund Policy:

Given the digital nature of this product, all sales are final and non-refundable. If you have any problems receiving or downloading the product, please feel free to contact me for assistance.

By purchasing this template, you agree to the following terms:

1. You may not claim authorship or original design credit for this template. Please do not present it as your own original design work.
2. You may not resell, redistribute, or re-license this template or its derivatives as a standalone product (e.g., as a template or theme).