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

Fluid image warping for modern Framer