Liquid Glass Cursor
A premium cursor lens effect that bends the page surface under the pointer for agency homepages, portfolios, and launch pages.
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 Command
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Usage Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Component Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
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.
Changelog
v1.1.0
Jul 22, 2026v1.0.0
Jun 4, 2026Props
| Prop | Type | Default | Description |
|---|---|---|---|
baseSize | number | 30 | Default cursor size in pixels. |
textHoverSize | number | 130 | Cursor size when hovering text targets. |
distortionScale | number | 1.5 | SVG displacement strength for the glass distortion. |
blurAmount | number | 0.002 | Blur amount applied inside the SVG filter. |
brightness | number | 90 | CSS brightness filter percentage. |
borderColor | string | #ffffff | Cursor border and inner shadow color. |
maxButtonWidth | number | 200 | Maximum cursor width when hovering button targets. |
maxButtonHeight | number | 150 | Maximum cursor height when hovering button targets. |
Frequently Asked Questions
When should I use Liquid Glass Cursor?
Use it when a high-craft homepage needs a glass lens bending the page surface under the pointer not on utility flows.
Does Liquid Glass Cursor work on mobile?
Disable it on coarse pointers with CSS and JS pointer queries, then provide native touch behaviour.
Can Liquid Glass Cursor reveal important content?
Only when the same content is visible or accessible without pointer movement. Cursor-only reveals are not suitable for critical information.
How should Liquid Glass Cursor behave around links and buttons?
It must preserve native click meaning, visible focus, hover states, and modal layering.
What should reduced motion do for Liquid Glass Cursor?
Disable trails, lag, ripples, and pointer-following motion, then return to the native cursor.
Can Hyperiux adapt Liquid Glass Cursor for a real brand system?
Yes. A custom version should define motion rules, visual treatment, performance budget, fallback behavior, source handoff, and implementation notes for the specific page or launch context.
Request a Custom Cursor Animation
Need a custom effect? Tell us what to create.
