Magnifying glass Text Lens

Text

About

A smooth magnifying glass hover effect for text and UI content. This React component creates a polished zoom lens that follows the cursor, floats beyond the container, and adds a realistic glass feel for interactive product demos, landing pages, and editorial interfaces.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Magnifying glass Text Lens to your project and fits it to your theme.

Code

How Magnifying glass Text Lens is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/magnifying-glass-text-lens";

export default function Demo() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-neutral-100 p-10">
      <Component lensSize={170} zoomFactor={1.9}>
        <div className="w-[460px] rounded-2xl bg-white p-8 shadow-xl ring-1 ring-black/5">
          <p className="text-sm font-medium uppercase tracking-[0.2em] text-neutral-400">
            Interactive demo
          </p>

          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">
            Hover to inspect the details
          </h2>

          <p className="mt-4 text-base leading-7 text-neutral-600">
            This magnifying lens follows the cursor with smoother motion,
            cleaner alignment, and a more realistic glass feel.
          </p>

          <div className="mt-6 grid grid-cols-2 gap-4">
            <div className="rounded-xl bg-neutral-100 p-4">
              <p className="text-xs uppercase tracking-wide text-neutral-400">
                Lens size
              </p>
              <p className="mt-2 text-2xl font-semibold text-neutral-900">
                170px
              </p>
            </div>

            <div className="rounded-xl bg-neutral-100 p-4">
              <p className="text-xs uppercase tracking-wide text-neutral-400">
                Zoom
              </p>
              <p className="mt-2 text-2xl font-semibold text-neutral-900">
                1.9x
              </p>
            </div>
          </div>
        </div>
      </Component>
    </div>
  );
}