Magnifying Glass

The MagnifyingGlass component creates a stunning "x-ray" or "flashlight" effect by rendering two completely different layouts on top of each other.

It uses framer-motion to track the user's cursor with spring physics, and applies a dynamic CSS mask-image with a radial gradient to the top layer. The result is a smooth, performant lens that reveals the secret lensContent exactly where the user hovers!

Live Preview

Installation

[!TIP] Performance: We use native CSS custom properties (--lens-x, --lens-y) inside a Framer Motion onUpdate callback to update the mask position. This bypasses the React render cycle completely, guaranteeing 60fps tracking even if the underlying layouts are extremely complex.

Usage Guide

1. Import the Component

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

import { MagnifyingGlass } from "@/components/creative/magnifying-glass";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { MagnifyingGlass } from "@/components/creative/magnifying-glass";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <MagnifyingGlass
        mainContent{/* value */}
        lensContent{/* value */}
        lensSize{10}
      />
    </div>
  );
}