Image Warp

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

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