About Bend Image Cursor
Make your images move, bend, and react to every cursor movement.
Bend Image is an interactive WebGL-powered Framer component that transforms ordinary images into smooth, elastic experiences.
As visitors move their cursor, the image follows with fluid motion, bends naturally based on movement speed, and smoothly returns to its original position when the cursor leaves.
Great For
🎨 Creative portfolios and personal websites
🖼️ Interactive galleries and photography showcases
💻 Digital agencies and design studios
✨ Modern landing pages and hero sections
👟 Fashion, lifestyle, and product presentations
🚀 Experimental websites and creative interactions
Live preview: https://bendimagecursor.framer.website/
Features
WebGL-powered bending — Elastic image distortion driven by cursor movement
Smooth cursor tracking — Images follow the pointer with adjustable easing
Velocity-based deformation — Faster movements create stronger bending effects
Elastic return animation — Images smoothly settle back into place
Responsive sizing — Adapts to different screen sizes
Pixelated mode — Switch between smooth and pixelated image rendering
Performance-conscious rendering — Pauses animation when offscreen or inactive
Customize
Everything is adjustable directly from the Framer properties panel.
Image — Upload or select your image
Width & Height — Control image dimensions
Follow Speed — Adjust how quickly the image follows the cursor
Bend Strength — Set the intensity of the elastic distortion
Max Bend — Limit the maximum deformation
Return Speed — Control how quickly the image returns to center
Pixelated — Enable or disable pixel-style rendering
Interaction — Turn cursor interactions on or off
Max DPR — Balance rendering quality and GPU performance
Alt Text — Add an accessible image description
Support
Created with 💛 by @Karim Saif .
Questions, feedback, or suggestions? Feel free to reach out.
Email: karimsaif0102@gmail.com
