Refractive Cursor Lens

A circular liquid-glass lens that follows the cursor with spring lag and refracts the content underneath via SVG turbulence + displacement. A radial-falloff mask attenuates distortion toward the center, so the rim ripples while the middle stays calm — opposite of a fisheye. Pass-through clicks, screen-reader hidden, disabled on touch and reduced-motion.

UniqueUI CLI

npx uniqueui add refractive-cursor-lens

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/refractive-cursor-lens.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

iOS 26 magnifier · liquid glass

Move your cursor anywhere here.

The lens follows you with a slight spring lag and refracts whatever sits underneath — type, gradients, images. Clicks pass straight through. Hidden on touch and reduced-motion.

SVGbackdrop-filterspringpointer:fine

Usage

import { RefractiveCursorLens } from "@/components/ui/refractive-cursor-lens";

export default function Example() {
  return (
    <div className="h-[460px] w-full rounded-2xl border bg-neutral-950">
      <RefractiveCursorLens className="h-full w-full">
        <div className="flex h-full items-center justify-center px-10">
          <article className="max-w-xl">
            <h2 className="text-4xl font-semibold tracking-tight text-white">
              Move your cursor anywhere here.
            </h2>
            <p className="mt-4 text-base text-neutral-300">
              The lens follows you and refracts the content underneath — type,
              gradients, images. Clicks pass straight through.
            </p>
          </article>
        </div>
      </RefractiveCursorLens>
    </div>
  );
}

Props

Prop	Type	Description
`size`	`number`	Diameter of the lens in CSS pixels.
`displacementScale`	`number`	Scale passed to feDisplacementMap. Higher values produce stronger refraction at the rim.
`showOnlyOver`	`React.RefObject<HTMLElement \| null>`	Optional ref bounding where the lens appears. Defaults to the wrapper element. Useful when the lens should only activate over a specific region (e.g. an image, an article).
`springConfig`	`{ stiffness: number; damping: number }`	motion useSpring config for the cursor follow. Lower stiffness gives more lag.
`className`	`string`	Classes for the wrapper element. Does NOT style the lens itself.
`children`	`React.ReactNode`	Content the lens floats over and refracts.