Skip to content
Pinky UI

cursor

Lens Cursor

A small local magnifier for media.

  • cursor

Live preview

Quick usage

usage
import { LensCursor } from "@pinky-ui/effects";

<LensCursor />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

LensCursor provides a small local magnifier over an image or media surface. It is useful for a product detail, material sample or image-led portfolio where a little inspection is helpful without opening a full lightbox.

Use a lens around 56–84px radius and zoom around 1.3–1.8. Keep the source image visible underneath and avoid magnifying text, controls or an entire page. For detailed inspection, a real zoomable media view is more honest than a cursor lens.

The lens is decorative and pointer-transparent; the child image keeps its meaningful alt text. It is disabled when motion is reduced or a fine pointer is unavailable, leaving normal media and focus behavior intact. Check keyboard focus and touch fallbacks explicitly.

Open this skill on its own page