Magnetic Gallery

The MagneticGallery component creates a stunning layout where every image tracks the global mouse vector. By calculating the distance from the mouse to the center of each image, we map that proximity to Framer Motion's rotateX and rotateY transforms, creating a localized magnetic "look at" effect.

Live Preview

Magnetic Gallery

Playground

PreviewUsageInstallation

Bento LayoutUniform GridHorizontal Row

Move Your Mouse

Notice how the images tilt to track your cursor globally.

Installation

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { MagneticGallery } from "@/components/creative/magnetic-gallery";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MagneticGallery } from "@/components/creative/magnetic-gallery";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MagneticGallery
        images="example"
      />
    </div>
  );
}