Liquid Glass Cursor

Overview

Liquid Glass Cursor turns pointer movement into atmosphere: a glass lens bends the page surface.

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 thing to watch 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

• Premium homepages where a glass lens can become the first brand interaction.
• Desktop hero sections where the cursor layer sits below CTAs, modals, and focus states.
• Liquid Glass 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 Liquid Glass 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 Liquid Glass Cursor cover focus rings or clickable controls.
• Forgetting to disable the effect on coarse pointers.
• Hiding useful content behind mouse-only movement.