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.