Loading
Noise Ripple Cursor
A cursor distortion effect that sends subtle noise ripples from the pointer for experimental, AI, cyber, and technical brand pages.
Published On: June 4, 2026
Last Updated: August 17, 2026
Three.js
Overview
Noise Ripple Cursor turns pointer movement into atmosphere: ripples disturb the page surface.
It fits creative homepages, portfolios, campaigns, and brand-led experiments where the pointer becomes part of the identity, and not dashboards, checkout, forms, or dense product screens.
The production risk is keeping the pointer optional. The effect must turn off cleanly on coarse pointers, leave focus outlines intact, and never sit between the user and a click. A page that breaks when the cursor layer is removed has leaned on it too hard.
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
- Cyber, AI, and experimental pages where pointer motion can disturb the surface like signal.
- Short desktop hero moments where ripple texture supports tone without owning meaning.
- Noise Ripple 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 Noise Ripple Cursor on coarse pointers.
Accessibility and Mobile
Turn the effect off on touch and keep native gestures intact, and give any cursor-only reveal a visible or tappable alternative.
Common Mistakes
- Letting Noise Ripple Cursor cover focus rings or clickable controls.
- Forgetting to disable the effect on coarse pointers.
- Hiding useful content behind mouse-only movement.
Changelog
v1.0.1
Jul 23, 2026Added reduced-motion support and removed debug logging on pointer events.
v1.0.0
Jun 4, 2026Initial release
Props
| Prop | Type | Default | Description |
|---|---|---|---|
overlayColor | color | #1825AA | Overlay and ripple shader color. |
pixelSize | number | 0.5 | Pixel block size used by the dither shader. |
lerp | number | 0.2 | Mouse smoothing amount for the ripple source. |
distortion | number | 0.5 | Strength of the image UV distortion. |
radius | number | 0.08 | Radius of the cursor ripple influence. |
Frequently Asked Questions
When should I use Noise Ripple Cursor?
Use it when a creative or experimental page needs ripples disturbing the surface as the pointer moves — not on utility flows.
Does Noise Ripple Cursor work on mobile?
Disable it on coarse pointers with CSS and JS pointer queries, then provide native touch behavior.
Can Noise Ripple 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 Noise Ripple Cursor behave around links and buttons?
Clicks, focus outlines, hover states, and modal layering must all behave normally with the effect in place.
What should reduced motion do for Noise Ripple Cursor?
Disable trails, lag, ripples, and pointer-following motion, then return to the native cursor.
Request a Custom Cursor Animation
Need a custom effect? Tell us what to create.
