---
title: "Image Warp — Framer component · Best of Framer"
description: "$21.00 · Framer component · by Louisa Young · Carousels. Image curves for cursor or slide"
canonical: "https://framer.elliotli.dev/component/image-warp"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Image Warp

# Image Warp

Image curves for cursor or slide

[View on Framer](https://framer.com/marketplace/components/image-warp/?via=elliot-li)

![Image Warp preview image 1](https://framer.elliotli.dev/og/component/image-warp/f5e718aeba0fe45e/1600x1200.jpg)

## Summary

Image curves for cursor or slide

## Description

### 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 Warp 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10017

## Details

- **Author**: Louisa Young
- **Price**: $21.00
- **Published**: 2026-08-11
- **Updated**: 2026-09-06
- **Added**: 2026-08-11
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow