---
title: "Material Warp Effect — Free Framer component · Best of Framer"
description: "Free Framer component · by Honcho · Effects. Material Warp Effect is a premium Framer code component that creates fluid, pointer-reactive image warping with a polished, high-end feel."
canonical: "https://framer.elliotli.dev/component/material-warp-effect"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Material Warp Effect

# Material Warp Effect

Fluid image warping for modern Framer

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

![Material Warp Effect preview image 1](https://framer.elliotli.dev/og/component/material-warp-effect/4d8677d5c19af92f/1600x1200.jpg)

## Summary

Material Warp Effect is a premium Framer code component that creates fluid, pointer-reactive image warping with a polished, high-end feel.

## Description

Material Warp Effect is a premium Framer code component that creates fluid, pointer-reactive image warping with a polished, high-end feel.

It is designed for portfolio, editorial, and modern product websites where motion should feel intentional rather than gimmicky. The effect responds smoothly to cursor movement and adds soft image distortion that feels alive without overpowering the layout.

### Features

-   Fluid image warping driven by pointer movement
    
-   Responsive sizing for flexible layouts
    
-   Adjustable intensity, radius, damping, and force
    
-   Performance controls with render scale and DPR cap
    
-   Offscreen pause support for better production performance
    
-   Clean setup with no external dependencies in use
    

### Controls

-   **Image**: Select the image source used by the effect
    
-   **Intensity**: Controls how strongly the image is warped
    
-   **Radius**: Sets how large the interaction area feels around the cursor
    
-   **Damping**: Controls how quickly the distortion settles
    
-   **Force**: Adjusts how strongly pointer velocity affects the warp
    
-   **Glow**: Adds a subtle highlight based on displacement strength
    
-   **Scale**: Changes internal render resolution for quality and performance balance
    
-   **Max DPR**: Caps rendering sharpness on high-density displays
    
-   **Pause Offscreen**: Stops animation when not visible
    
-   **Threshold**: Controls when the effect resumes based on viewport visibility
    

### Best for

-   Portfolio websites
    
-   Editorial layouts
    
-   Hero sections
    
-   Image showcases
    
-   Premium landing pages
    

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

-   All · #1859

## Details

- **Author**: Honcho
- **Published**: 2026-04-16
- **Updated**: 2026-04-16
- **Added**: 2026-04-10
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows