About Magnetic Warp
Magnetic Warp is an interactive WebGL image component for Framer that transforms static images into fluid, responsive visuals. Move your cursor across the image to create a smooth magnetic distortion that pulls and bends the image around your pointer.
Built with customizable presets, adjustable physics, responsive sizing, reduced-motion support, and optimized WebGL rendering, Magnetic Warp adds depth and interaction without requiring any additional setup.
Preview
https://magneticwarp.framer.website/
Great For
Creative portfolios
Agency websites
Digital product landing pages
Photography websites
Art and editorial websites
Fashion and luxury brands
Interactive hero sections
Experimental web experiences
Featured project sections
Modern Framer websites
Features
Interactive magnetic image distortion
WebGL-powered rendering
Smooth cursor-based interaction
Balanced, Soft, Strong, and Wide presets
Custom strength control
Adjustable stiffness and damping
Customizable interaction radius
Responsive image support
Cover-style image rendering
Adjustable WebGL quality
Reduced-motion support
Static-renderer support
Automatic resizing with ResizeObserver
Offscreen rendering optimization
WebGL context handling
Custom background color
Adjustable corner radius
Disabled mode for a completely static image
Lightweight and fully customizable in Framer
Customize
Magnetic Warp gives you control over the interaction without changing the core component.
Choose from four presets or use the Balanced preset to fine-tune the effect manually. Adjust the magnetic Strength, Stiffness, Damping, and Radius to create anything from a subtle image movement to a stronger fluid distortion.
You can also control WebGL Quality, background color, corner radius, and disabled mode directly from Framer's property panel.
Support
Need help setting up Magnetic Warp or have a question about customization?
Email: karimsaif010@gmail.com
