[BUG]: Waves Component Not Registering Mouse Clicks after being added as a section

[zanjeel]

Describe the issue

Hi, https://www.reactbits.dev/backgrounds/waves work perfectly as a single component but don't move on user mouse hover or drag after they are added as a separate component. I have tried rendering it only and it works and registers mouse movement.
But as soon as I add my Hero section, it does'nt work. I tried changing ZIndex and relative/absolute positioning but didn't work.

Reproduction Link

No response

Steps to reproduce

You could try importing other ready made components taking up space like Hero/Contact sections and rendering Wave component below them, do tell me if it registers the mouse movement. Thanks!

Validations

• I have checked other issues to see if my issue was already reported or addressed

[DavidHDev]

Hi @zanjeel

While I wasn't able to reproduce your exact problem, I did notice the component's mouse responsiveness would rapidly deteriorate every time it was re-rendered on the page, until a certain point when it wouldn't work at all.

This means one thing:
The components you're using it with are likely causing it to re-render many many times (which is exactly why you noted that it works well on its own).

Why this was happening
One main thing, the component was not optimized to handle being re-rendered a lot of times on the same page

The fix
I have optimized it in these two commits to make sure every unmount is properly cleaned up and isolated the main setup useEffect hook of the component away from the config changes:
0521a02
1b5e0f9

Hopefully, with these changes, if my guess was right, you'll be able to see the mouse interaction even with components that re-render the Waves component a bunch of times, but if it still doesn't work, to me it indicates a deeper problem in your application that you should consider fixing.

[zanjeel]

Hi @DavidHDev I just fixed the issue in Waves component used in ReactBits which was causing the issue, and it WORKSSS!! 👯 :D 💃

The waves would stop responding to mouse movement after the first few interactions. This was happening because of incorrect mouse position calculations that didn't properly account for scroll position and container bounds.

How can I give the full code to you? I want to contribute to the Waves.jsx with Tailwind (as I never contributed to an open source Github repo lol-first time woo)

Below is what I did shortly:

---

a) First Change: Updated the mouse position calculation to use getBoundingClientRect()

"const rect = containerRef.current.getBoundingClientRect();
mouse.x = x - rect.left - scrollX;
mouse.y = y - rect.top - scrollY;"

instead of:

"mouse.x = x - b.left;
mouse.y = y - b.top + window.scrollY;"

b) Second Change: Added proper scroll handling:

"const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
const scrollY = window.pageYOffset || document.documentElement.scrollTop;"

This worked bcs:

-> getBoundingClientRect() provides live, accurate coordinates of the container relative to the viewport and accounts for both horizontal and vertical scroll positions

-> The mouse coordinates are now always calculated relative to the container's current position, not its initial position. The calculation remains accurate even when the page is scrolled or the container's position changes.

Previous Issues:
The old code only handled vertical scroll (window.scrollY) and used stale container bounds from boundingRef
It didn't properly account for the container's position in the viewport causing the mouse position calculations to become increasingly inaccurate as the user scrolled or as time passed.

This fix ensures that the waves component always knows the exact position of the mouse relative to its container, making the interaction smooth and consistent throughout the entire user session, regardless of scrolling or container position changes.

---

Do let me know how I can contribute. Thanks!

[zanjeel]

(attached a video of the correct implementation now, error was with registering the mouse movement in React Waves component.) @DavidHDev

recording-waves.mp4

[DavidHDev]

@zanjeel Awesome, glad you figured it out, if you want to contribute with this, you'd have to fork and run the project locally, update all 4 versions of the component so that they are in sync with this change, and then check that the demo page is error-free and without any surprises. Then you'd just open a PR to merge your changes into the main branch.

[zanjeel]

@DavidHDev Sure, will do soon!

[DavidHDev]

Will be closing this issue @zanjeel , but feel free to open that PR whenever you want!