Magnetic Depth Gallery

Magnetic Depth Gallery

Default

Playground

PreviewUsageInstallation

Depth of Field Gallery

Move your cursor over the grid.

Installation

Architecture

This component calculates Euclidean distance directly in a 60fps useAnimationFrame loop to achieve its effect:

1. A single onMouseMove event listener is attached to the parent container. This writes the cursor's X and Y coordinates into highly-performant Framer Motion useMotionValues.
2. Every image in the gallery subscribes to these motion values.
3. On every frame, each image calculates its exact center point on the screen and measures its distance to the cursor.
4. Using linear interpolation, the component dynamically scales and sharpens items that are near the cursor, while fading and applying CSS blur() to items that are far away.

The result is a stunning "macro lens" depth-of-field effect that reacts instantly to user input.

Usage Guide

1. Import the Component

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

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

2. Implementation Example

Render the component and customize its behavior by passing props:

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

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