Ripple Cursor
Concentric rings expand from the cursor like water ripples with every move.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | #38bdf8 | Color of the ripple rings |
| maxRings | number | 12 | Maximum concurrent rings on screen at once |
When to Use
Great for clean SaaS products, fintech, and any interface where elegance matters. The ripple gives precise cursor feedback without being distracting.
Best Practices
Keep maxRings between 8-16. Works on both dark and light backgrounds — adjust color for contrast. A small dot is drawn at the exact cursor position for precision.
Why This Component Matters
Water ripples are universally understood as a reaction to touch — using them on cursor movement creates an unconscious sense of physical interaction with the screen.
FAQ
QDo rings appear on every pixel of movement?
No — rings only spawn when the cursor moves more than 6px from the last ring origin, preventing ring flooding.
QDoes it work on click too?
Currently movement-triggered only. Adding click triggers requires a small addEventListener('click') addition in source.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.