Magnetic Image

Show Preview
Magnetic Image
Magnetic Image

About Magnetic Image

Interactive image that smoothly moves away from your cursor on hover with spring physics and 3D tilt effects.

Features:

  • Image moves in the opposite direction of the cursor with a magnetic repulsion effect

  • Works across the entire image area with continuous mouse tracking

  • Adjustable movement amount (5-50px) for subtle or dramatic effects

  • Speed control (50-300) for quick or slow response

  • Smoothness control (10-50) for bouncy or gentle motion

  • Optional 3D tilt effect that follows cursor position

  • Optional scale effect for shrinking on interaction

  • Optional motion blur during movement

  • Border radius control (0-200px) for rounded corners

  • Realistic spring-based physics for natural motion

  • Visible pointer cursor on hover

  • Responsive image upload with optimization

  • Fixed layout - fully resizable on canvas

  • Smooth 60fps animations with hardware acceleration

  • Touch-friendly for mobile devices

  • Returns smoothly to center when cursor leaves

From Soubhagya Sahu

Hover Image Blur
Polaroid Image Maker
Pixelate Image
Instagram Post

Related Components

Gradient Depth Blur
Pro Liquid Shader
Confetti Heart
Fluid Image