Interactive Lens Magnifier

effects

Dynamic cursor-tracking optical magnifying lens revealing high-res surface details.

#lens#magnifier#zoom#interactive#spatial

Live Interactive Preview

Precision Optics

AURENZA SPATIAL UI

High-definition zero-blur interactive magnifying lens with pure geometric scale.

Component Source Code

Select language in the dropdown

Lens.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Sparkles } from 'lucide-react';
5
6export default function Lens() {
7  const [mousePos, setMousePos] = useState({ x: 150, y: 100 });
8  const [isHovered, setIsHovered] = useState(false);
9
10  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
11    const rect = e.currentTarget.getBoundingClientRect();
12    setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
13  };
14
15  const lensSize = 110;
16  const zoomFactor = 2.0;
17
18  return (
19    <div
20      onMouseMove={handleMouseMove}
21      onMouseEnter={() => setIsHovered(true)}
22      onMouseLeave={() => setIsHovered(false)}
23      className="relative h-56 w-full max-w-md overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-950 p-6 flex flex-col justify-center items-center text-center cursor-crosshair select-none shadow-2xl"
24    >
25      <div className="space-y-2 pointer-events-none">
26        <div className="inline-flex items-center gap-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/30 px-3 py-1 text-[11px] font-bold text-cyan-400">
27          <Sparkles className="h-3 w-3" /> Precision Optics
28        </div>
29        <h2 className="text-xl sm:text-2xl font-black text-white tracking-wide">
30          AURENZA SPATIAL UI
31        </h2>
32        <p className="text-xs text-slate-400 max-w-xs">
33          High-definition zero-blur interactive magnifying lens with pure geometric scale.
34        </p>
35      </div>
36
37      {isHovered && (
38        <div
39          style={{
40            width: `${lensSize}px`,
41            height: `${lensSize}px`,
42            left: `${mousePos.x}px`,
43            top: `${mousePos.y}px`,
44            transform: 'translate(-50%, -50%)',
45          }}
46          className="pointer-events-none absolute overflow-hidden rounded-full border-2 border-cyan-400 bg-slate-900 shadow-[0_0_30px_rgba(6,182,212,0.7),inset_0_0_15px_rgba(6,182,212,0.4)] z-30"
47        >
48          <div
49            style={{
50              position: 'absolute',
51              width: '448px',
52              height: '224px',
53              left: `${-mousePos.x * zoomFactor + lensSize / 2}px`,
54              top: `${-mousePos.y * zoomFactor + lensSize / 2}px`,
55              transform: `scale(${zoomFactor})`,
56              transformOrigin: '0 0',
57            }}
58            className="flex flex-col justify-center items-center text-center p-6 space-y-2 bg-slate-950"
59          >
60            <div className="inline-flex items-center gap-1.5 rounded-full bg-cyan-500/20 border border-cyan-400 px-3 py-1 text-[11px] font-bold text-cyan-300">
61              <Sparkles className="h-3 w-3 text-cyan-300" /> Precision Optics
62            </div>
63            <h2 className="text-xl sm:text-2xl font-black text-cyan-300 tracking-wide drop-shadow-[0_0_10px_#22d3ee]">
64              AURENZA SPATIAL UI
65            </h2>
66            <p className="text-xs text-slate-200 max-w-xs">
67              High-definition zero-blur interactive magnifying lens with pure geometric scale.
68            </p>
69          </div>
70        </div>
71      )}
72    </div>
73  );
74}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/effects/Lens.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import InteractiveLensMagnifier from '@/components/effects/Lens';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <InteractiveLensMagnifier />
7    </main>
8  );
9}