Material Warp Effect

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

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