Fish Eye Cursor

Overview

Fish Eye Cursor turns pointer movement into atmosphere: the pointer magnifies nearby content.

It belongs on creative homepages, portfolios, campaign pages, and brand-led experiments where the cursor can become part of the visual language. It does not belong on dashboards, checkout, forms, or utility-heavy product screens.

The production risk is precision. The cursor layer must stay disposable, disable on coarse pointers, preserve visible focus, and never hide click intent. If removing the effect breaks the page, the cursor has been promoted past its pay grade.

Install

Usage

Component Code

Example Production Use Case

Use this as cursor-system implementation guidance. Verify the shipped component export, pointer-tracking model, coarse-pointer disablement, z-index behavior, focus safety, cleanup, and reduced-motion handling before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Image-led portfolios where hover can magnify optional visual detail.
• Galleries where inspection is useful but the same content still works without a pointer.
• Fish Eye Cursor gives pointer movement a brand role without hiding core controls or content.

Not For

Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.

Performance Budget

Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Fish Eye Cursor on coarse pointers.

Accessibility and Mobile

Disable on coarse pointers and preserve normal touch behavior. Cursor-only reveals must have visible or tap-accessible alternatives.

Common Mistakes

• Letting Fish Eye Cursor cover focus rings or clickable controls.
• Forgetting to disable the effect on coarse pointers.
• Hiding useful content behind mouse-only movement.